JS/jQuery：添加類到2個div當點擊單個格

Question

我試圖讓當它與圖像的div被點擊時，這兩個div和它的相關div（一個與-content）附加了.active類（也就是，當一個像格被點擊它的相應的內容框彈出，）

http://jsfiddle.net/sergep/VM6AC/

我不能確定什麼，我在代碼中的JavaScript部分做錯了：

$('.diagram div').click(function(){ 
    var $this = $(this); 
    var type = $this.attr('class'); 
    $this.siblings('.diagram div').removeClass('active'); 
    $this.addClass('active'); 
    $('div.diagram-content .' + type).addClass('active'); 
}); 

爲什麼當我添加一個簡單的e alert($this.attr('class'));行代碼完全停止工作？ （？或者它）

的HTML看起來像這樣：

<div class="diagram"> 
    <div id="gameboy" class="gameboy"></div> 
    <div class="switch"></div> 
    <div class="face"></div> 
</div> 
<div class="anatomy-content"> 
    <div class="gameboy-content">This is a content box for the gameboy</div> 
    <div class="switch-content">This is a content box for the switch</div> 
    <div class="face-content">This is a content box for the face</div> 
</div> 

我決定採取classes的做法，而不是到data-type方法。

Answer 1

我建議：

$('.diagram div').click(function() { 
    var $this = $(this), 
     theClass = this.className; 
    $('.active').removeClass('active'); 
    $this.add($('.' + theClass + '-content')).addClass('active'); 
}); 

JS Fiddle demo。

順便說一句，使用$this.attr('class')不會失敗（檢查控制檯），問題是，你忘了給-content字符串追加到類名稱：

$('.diagram div').click(function(){ 
    var $this = $(this); 
    var theClass = $this.attr('class'); 
    console.log($this,theClass); 
    $this.siblings('.diagram div').removeClass('active'); 
    $this.addClass('active'); 
    $('div.diagram-content .' + theClass + '-content').addClass('active'); 
    //          ^-- this is necessary, otherwise there's no match 
}); 

JS Fiddle demo。

參考文獻：

• addClass()。
• add()。
• removeClass()。