JQuery checkbox改變元素style 以及一些method懶雜記

簡單的直接上代碼

HTML

<div id="A">
  <input type="checkbox" onChange="B(A, this)">Sample~~~~~
</div>

CSS

#A {
  background-color: #666666;
  padding: 10px;
  margin: 10px;
}

JS

function B(x, _this) {
  if (_this.checked) {
    x.style.backgroundColor = '#777777';
  } else  {
    x.style.backgroundColor = '#666666';
  }
}
　

++++
更改class:

div.className="class名字"

附加class:最快當然是jQuery的addClass,就不多說啦

但JS原生要做出這method就麻煩點

function addClass(obj, cls){
    var obj_class = obj.className;  
    var blank = (obj_class != '') ? ' ' : '';  
    var added = obj_class + blank + cls;   
    obj.className = added;

function removeClass(obj, cls){
    var obj_class = ' '+obj.className+' ';    
    obj_class = obj_class.replace(/(\s+)/gi, ' '),   
    var removed = obj_class.replace(' '+cls+' ', ' ');   
    removed = removed.replace(/(^\s+)|(\s+$)/g, '');
    obj.className = removed;
}

function hasClass(obj, cls){
    var obj_class = obj.className;
    var obj_class_lst = obj_class.split(/\s+/);
    var x = 0;
    for(x in obj_class_lst) {
        if(obj_class_lst[x] == cls) {
            return true;
        }
    }
    return false;
} 

*備註一下這段裡面有出現的正則表達式:

\s： space， 空格
+： 一个或多个
^： 开始，^\s，以空格开始
$： 结束，\s$，以空格结束
|：或者
/g：global， 全局
/gi:全局且不在意大小寫
replace() 替换

　
*(這裡是參考解讀John Lui大神的碼, 僅做學習用途)

1. 新增: 主要是先獲取class內容, 再做判斷是否為空值, 不是的話在前頭加個’ ’ , 之後組合原本的類跟新的類, 取代原本的類
2. 刪除: 也是先獲取類的內容, 在頭尾加一個’ ‘, 再原類中 替換掉首尾加了空格的類, 再去掉頭尾空格, 之後取代原本的類
3. 判斷是否有此class: 當然也是先獲取這類的內容, 再通過split空字符將cls轉換成數組, 之後for迴圈循環比對是否包含

個人當初自己在直接編的時候, 覺得比較容易犯錯的地方是, 剛開始是否要動作的判斷, 還有加入class的地方沒想到要給它空格, class都黏在一塊, 找了很久才找到 要+’ ’

大神的網站就像是參考書後面幾頁的答案讓人開竅R
　
　
　
　　
更改id:

div.id="id名字"

　
(很懶)
　

感謝感謝