Как изменить свойства всех div с data-item при нажатии кнопки с id?

Question

[e_liza_veta]

Здравствуйте!
У меня есть галерея объектов div (фото разных городов + надпись) и есть кнопки.
Не могу понять, как сделать, чтобы при нажатии на кнопку, элементы с определенным data-item оставались такими же, а все остальные меняли прозрачность.

кнопки

<a href="#chat" class="path-slider__item" id="Moscow">
            <div class="item__circle"></div>
            <div class="item__title"><h2>Москва</h2></div>
        </a>
      <a href="#chat" 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>
      <a href="#chat" class="path-slider__item" id="Tula">
            <div class="item__circle"></div>
            <div class="item__title"><h2>Тула</h2></div>
        </a>

объекты

<div class="lenta__object" data-item="Moscow">
			<div class="lenta__info"></div>
		</div>
		<div class="lenta__object" data-item="Orel">
			<div class="lenta__info"></div>
		</div>
		<div class="lenta__object" data-item="StPeterburg">
			<div class="lenta__info"></div>
		</div>
		<div class="lenta__object" data-item="Kaluga">
			<div class="lenta__info"></div>
		</div>
		<div class="lenta__object" data-item="Moscow">
			<div class="lenta__info"></div>
		</div>

Answer 1

[Roman Khegay]

Как-то так:

Comments

[Alex]

Не самый оптимальный подход. Выполняется немного лишней работы + есть микроскопическая вероятность получить конфликт со стилями.

[Roman Khegay]

Alex, ну откровенно - это дерьмо, а не решение. Но какой вопрос и пример кода, такой и ответ

[e_liza_veta]

Roman Khegay, хм, т.е. если к вам приходит клиент с "разными" вопросами и примерами, то вы ему подсовываете откровенно дерьмовое решение/совет. интересно)

[e_liza_veta]

в любом случае, не могу воспользоваться вариантом, т.к. не хочу перезагружать кнопки еще и id

[Roman Khegay]

e_liza_veta, именно поэтому, когда клиент, либо другой человек, которому нужно решение приходит ко мне - я прошу описать все в тз и помогаю ему в этом за деньги. Тут же бесплатные ответы.

как сделать, чтобы при нажатии на кнопку

- где в вашем коде кнопка? У вас указаны a - это ссылки, либо якорные объекты.

Обращайтесь в этим якорям по названию класса. Берите id и дальше используйте цикл по массиву объектов в галерее:

$('.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'});
        }
    });
});

Вместо изменения css, можно добавлять класс.