• 實現(xiàn)一個簡單的樣式轉換器，部分代碼如下，實現(xiàn)功能為，當點擊Default時所有文字都會清空當前樣式并轉換為原來的樣式，當點擊Narrow按鈕是，字體會變小，當點擊Large所有字體會變大，實現(xiàn)思路為，點擊按鈕則為當前的文本添加一個CSS類。另外一個是，當按鈕被點擊時字體會變粗。

<div id="container">

      <div id="switcher" class="switcher">
        <h3>Style Switcher</h3>
        <button id="switcher-default">
          Default
        </button>
        <button id="switcher-narrow">
          Narrow Column
        </button>
        <button id="switcher-large">
          Large Print
        </button>   
      </div>

body.large .chapter {
  font-size: 1.5em;
}

body.narrow .chapter {
  width: 250px;
}

.selected {
  font-weight: bold;
}

• 第一種方法如下，將當前HTML文本的ID和JS結合在一起

$(document).ready(function() {
    $('#switcher-default').addClass('selected');
    $('#switcher button').on('click', function() {
        $('body').removeClass();
        $('#switcher button').removeClass('selected');
        $(this).addClass('selected');
    });
    $('#switcher-narrow').on('click', function() {
         $('body').addClass('narrow');
    });
    $('#switcher-large').on('click', function() {
         $('body').addClass('large');
    });
});

• 第二種方法如下，通過上下文以及CSS類名的統(tǒng)一性，使得JS代碼得到簡化，同時提高了其可維護性和擴展性

$(document).ready(function() {
    $('#switcher-default').addClass('selected');
    $('#switcher button').on('click', function() {
        var bodyClass = this.id.split('-')[1];
        $('body').removeClass().addClass(bodyClass);
        $('#switcher button').removeClass();
        $(this).addClass('selected');
    });
});