JQuery / JS: активировать два div, при этом деактивируя все остальные при нажатии на один div

Question

JQuery / JS: активировать два div, при этом деактивируя все остальные при нажатии на один div

0

Я пытаюсь сделать это так, что, когда я нажимаю на div-изображение, появляется соответствующее поле содержимого (т.е. Div поворачивается с display:none; для display:inline;).

http://jsfiddle.net/sergep/gXRRw/

['pop up' box = div с content ]

Я использую простой JS для активации соответствующего div:

$('.diagram div').click(function(){
  $(this).siblings('.diagram div').removeClass('active');
  $(this).addClass('active');
});

В настоящее время html выглядит так:

<div class="diagram">
  <div class="gameboy"></div>
  <div class="switch"></div>
  <div class="face"></div>
</div>
<div class="diagram-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>

Вопрос в том, должен ли я инкапсулировать всплывающие окна контента внутри класса .diagram? или иметь его в отдельном .diagram-content?

Как изменить код, чтобы добавить/добавить .active класс в активную область, которая должна появиться? Или лучший .click(function) - изменить display css соответствующего окна содержимого внутри .click(function)?

Serge P 21 окт. 2013, в 15:56

Источник

Теги:

jquery

html

toggle

1 ответ

Ещё вопросы

Nick Caballero · Answer 1 · 2013-10-21T10-32-00.000Z

Вместо использования класса вы можете использовать атрибут data HTML5. Вы можете использовать селектор CSS для этих атрибутов, если вы хотите реализовать изменения изображения с помощью CSS, как есть.

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

Это помогает изолировать ваш стиль от вашего контента. Вы можете получить доступ к свойству data с помощью $.data()

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

Обратите внимание, что вы можете добиться того же, используя простые классы CSS, но всегда лучше изолировать свои данные от вашего представления. В этом случае можно изолировать стиль содержимого диаграммы и смысл содержимого.

Я вижу, к чему вы клоните, но я решил пока что использовать подходы классов! Я все еще не уверен, что я делаю неправильно с синтаксисом (плагин в alert останавливает код: S, так сложно проверить) - Есть ли шанс, что вы могли бы решить эту проблему? jsfiddle.net/sergep/5uy7h