Как можно сделать не привязываясь к id?

Question

[VitStar]

Добрый день!

Сделал показ блока при клике на ссылку. Но вот проблема если их несколько то приходится делать такую конструкцию
$('#zurnalItem_1').click(function(){
$('#zurnalItemImg_1').stop(false, false).slideToggle('slow');
$('#zurnalItemImg_2').slideUp('slow');
$('#zurnalItemImg_3').slideUp('slow');
$('#zurnalItemImg_4').slideUp('slow');
$('#zurnalItemImg_5').slideUp('slow');
$('#zurnalItemImg_6').slideUp('slow');
$('#zurnalItemImg_7').slideUp('slow');
$('#zurnalItemImg_8').slideUp('slow');
$('#zurnalItemImg_9').slideUp('slow');
});

Что не очень когда их много или когда ты не знаешь какая будет цифра в id. Есть ли какой то способ сделать что бы js сам определял на какую нажали и показывать блок с zurnalItemImg_ и той цифрой как у блока zurnalItem_

Comments

[Алексей Ярков]

HTML разметку покажите

Answer 1

[Nwton]

Установи каждому блоку class, детектируй нажатие на блок по классу и определяй id блока после нажатия.

Например, установи всем class="pop"
И обрабатывай клик так:

$('.pop').click(function() {
    $('#' + this.id).slideUp('slow');
});

Comments

[VitStar]

Тогда сворачивается ссылка которой я прописал класс. А блок не появляется.

[Nwton]

VitStar: я привел пример селектора, а не готовое решение

Answer 2

[hoarywolf]

Всем ссылкам общий класс и id изображения в какой-нить параметр типа data-img

<a class="link_class" data-img="1"........

$('.links_class').click(function(){
var id =$(this).attr('data-img');
$('#zurnalItemImg_'+id).stop(...........

Comments

[VitStar]

$('.links_class').click(function(){
var id =$(this).attr('data-img');
$('#zurnalItemImg_'+id).stop(false, false).slideToggle('slow');
});

Если я пишу так то все работает. Но нужно как то сделать что бы уже открытый закрывался а новый но его месте. Сейчас если открываешь новый он ниже открывается.
В старом вот это отвечало $('#zurnalItemImg_9').slideUp('slow'); За скрытие

[hoarywolf]

VitStar: всем кто открывается тоже общий класс, в функции сначала по имени класса закрываем всех, потом по ид открываем который нужно

[hoarywolf]

VitStar: типа
$('.links_class').click(function(){
$('.zurnalItemImgs').slideUp('slow');
var id = $(this).attr('data-img');
$('#zurnalItemImg_'+id).stop(false, false).slideToggle('slow');
});

[VitStar]

Да везде прописал (a hdata-img="6" class="links_class")

[VitStar]

В js попробовал так
('.links_class').click(function(){
var id =$(this).attr('data-img');
$('#zurnalItemImg_'+id).slideUp('slow');
$('#zurnalItemImg_'+id).stop(false, false).slideToggle('slow');
});

Не все равно не закрывает открытый перед этим.

P.S Простите js пытаюсь только еще освоить

[hoarywolf]

VitStar: блокам тоже общий класс пропишите и закрывайте их по имени класса

[VitStar]

hoarywolf: Не срабатывает. Все равно не закрываются.

[hoarywolf]

VitStar:

(div class="zurnalItemImgs" id="urnalItemImg_1".................

(a class="link_class" data-img="1"........

$('.links_class').click(function(){
$('.zurnalItemImgs').slideUp('slow');
var id =$(this).attr('data-img');
$('#zurnalItemImg_'+id).stop(...........

[VitStar]

(div class="previy_zurnal_wrap zurnalItemImgs" id="zurnalItemImg_8")

(a href="#" data-img="2" class="links_class")

$('.links_class').click(function(){
$('.zurnalItemImgs').slideUp('slow');
var id =$(this).attr('data-img');
$('#zurnalItemImg_'+id).stop(false, false).slideToggle('slow');
});

[VitStar]

И не как не хочет.

[hoarywolf]

VitStar: должно. Проверяйте что у вас не так.

[VitStar]

не работает. Ладно спасибо большое! за помощь. Не буду вас грузить.

[hoarywolf]

VitStar: и еще раз проверяйте, где у вас какие классы и ид

[VitStar]

Везде вроде как вы писали
skrinshoter.ru/s/200916/Xy1Kzn?a
skrinshoter.ru/s/200916/pvqx1b?a

[hoarywolf]

VitStar: codepen.io/ilyap/pen/yaVrBv

[VitStar]

Спасибо вам большое что не послали такого болбеса как я ) Теперь разберусь как сделать что бы только 1 элементы виден был изначально и будет супер. Спасибо еще раз!!!