JS / jQuery: добавить класс до 2 делений при нажатии на один дел

Question

JS / jQuery: добавить класс до 2 делений при нажатии на один дел

0

Я пытаюсь сделать так, чтобы при нажатии на div с изображением оба div и связанного с ним div (один с -content) добавляются с помощью .active класса (то есть, когда .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');
});

Почему я добавляю простое 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.

Serge P 21 окт. 2013, в 17:03

Источник

Теги:

javascript

jquery

html

toggle

1 ответ

Ещё вопросы

David Thomas · Accepted Answer · 2013-10-21T13-13-00.000Z

Я бы предложил:

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

Демо-версия JS Fiddle.

Кстати, использование $this.attr('class') не $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 no match
});

Демо-версия JS Fiddle.

Рекомендации:

Удивительно быстро и невероятно эффективно. Спасибо!
Добро пожаловать, я рад, что помог! : D