Не срабатывает .click(). Не могу понять в чем ошибка

Question

У меня есть панель с ссылками и галлерея с фотографиями. Пытаюсь реализовать, чтобы при нажатии на а, фото с не тем data-item становились полупрозрачными. ( при нажатии на кнопку "Москва" фотографии, не связанные с этим городом, становились полупрозрачными).

$('.path-slider__item').click(function(e) {
  e.preventDefault();

  var btnId = $(this).attr('id');

  $('[data-item]').each(function() {
    $(this).css({
      'opacity': '1'
    })

    if ($(this).data('item') !== btnId) {
      $(this).css({
        'opacity': '0.5'
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="path-slider">
  <a href="#" class="path-slider__item" id="Moscow">
    <div class="item__circle"></div>
    <div class="item__title">
      <h2>Москва</h2>
    </div>
  </a>
  <a href="#" class="path-slider__item" id="Kaluga">
    <div class="item__circle"></div>
    <div class="item__title">
      <h2>Калуга</h2>
    </div>
  </a>
  <a href="#chat" class="path-slider__item" id="Orel">
    <div class="item__circle"></div>
    <div class="item__title">
      <h2>Орел</h2>
    </div>
  </a>
</div>

<div class="lenta">
  <div class="lenta__object" data-item="Moscow">
    <img class="lenta__image" src="#">
    <div class="lenta__info">
      <h3 class="object__name"></h3>
      <p class="object__text"></p>
    </div>
  </div>
</div>

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

БЛОГ НА HUSL

Не срабатывает .click(). Не могу понять в чем ошибка

Ответы (0 шт):