Question

我正在尝试这样做，以便当点击带有图像的div时，div和它的相关div（一个带有-content）附加一个.active类（即，单击图像div时，弹出相应的内容框

我不确定我在代码的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方法。

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

参考文献：

JS / jQuery：点击单个div时，addClass为2个div

1 个答案: