У меня есть 3 ряда элементов (svgs и их описания) с почти одинаковой разметкой; Я только что дал каждому контейнеру дополнительный класс идентификации, чтобы различать их. Я хочу, чтобы, когда я щелкаю svg одного элемента в одном ряду, другие не деактивируются. События, происходящие в каждом ряду, должны быть независимы друг от друга.

$('.container-a .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-a .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

    $('.container-b .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-b .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

    $('.container-c .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-c .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

Это то, с чем я работал раньше, однако, оно деактивирует все остальное после того, как что-то щелкнуло, а не только деактивирует все остальное в ряду.

$('.holder').on('click', function() {
  var itemId = $(this).attr('data-itemid');
  console.log(itemId);
  $('.holder').removeClass('activated');
  $('.description').removeClass('activated');
  $('.item-'+itemId).addClass('activated');
});

Вот мой HTML

<div class="container-a container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>



<div class="container-b container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>

<div class="container-c container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>

Есть ли способ, которым я могу разбить это на одну функцию щелчка вместо 3?

0
bluebrooklynbrim 29 Авг 2017 в 15:59

3 ответа

Лучший ответ

Вы дадите нам больше шансов помочь, если предоставите HTML-код, но сейчас вы можете попробовать

function change(element){
  var itemId = element.attr('data-itemid');
  console.log(itemId);
  $('.holder').removeClass('activated');
  $(element).find('.description').removeClass('activated');
  $('.item-'+itemId).addClass('activated');
}

$('.container-a .holder').on('click', function() {
      change(this);
    });
1
Renzo Calla 29 Авг 2017 в 13:04

Вы можете переместить часть кода в общую функцию:

$('.container-a .holder').on('click', function() {
  updateClasses('.container-a .description', $(this).attr('data-itemid'));
});

$('.container-b .holder').on('click', function() {
  updateClasses('.container-b .description', $(this).attr('data-itemid'));
});

$('.container-c .holder').on('click', function() {
  updateClasses('.container-c .description', $(this).attr('data-itemid'));
});

function updateClasses(container, itemId) {
  console.log(itemId);
  $('.holder').removeClass('activated');
  $(container).removeClass('activated');
  $('.item-' + itemId).addClass('activated');
}

Обратите внимание, что это может быть еще проще, в зависимости от того, как выглядит ваш HTML-файл.

0
Mistalis 29 Авг 2017 в 13:39

По сути, все сводится к поиску способа выбора элемента description.

Я считаю, что это будет работать:

$('.holder').on('click', function() {
  var itemId = $(this).attr('data-symptomid');
  console.log(itemId);
  $('.holder').removeClass('activated');
  //$('.container-c .description').removeClass('activated');
  $(this).find('.description').removeClass('activated');

  $('.item-'+itemId).addClass('activated');
});
1
Roko 29 Авг 2017 в 13:36