0

我正在尝试这样做，以便当单击带有图像的 div 时，该 div 及其相关 div（一个带有-content）都附加了一个.active类（也就是说，当单击图像 div 时，会弹出相应的内容框)

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');
});

为什么当我添加一个简单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方法。

4

1 回答 1

1

我建议：

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

JS 小提琴演示。

顺便说一句，使用$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 小提琴演示。

参考：

于 2013-10-21T14:50:42.253 回答