Странное поведение jQuery при отображении скрытого содержимого

Question

У меня есть ряд содержимого html, называемых фильтрами, которые генерируются из базы данных. Содержимое может изменяться динамически в соответствии со страницей. Я дал идентификаторы css для каждого основного div и добавил число с ними во время цикла. Ниже приведен пример фрагмент кода:

<div><a id="filter-1">Brands</a></div> 
<div id="filter-op-1">This is option 1</div> 
<div><a id="filter-2">Size</a></div> 
<div id="filter-op-2">This is option 2</div> 
<div><a id="filter-3">Color</a></div> 
<div id="filter-op-3">This is option 3</div> 

идентификаторы filter-1 и filter-op-1 и т.д. порождаются числом петель, поэтому мы не знаем, как будет генерироваться много содержания на странице для фильтров.

Мне нужно, чтобы показать/скрыть фильтр-оп-й содержимое от a мыши, поэтому я написал следующий JQuery код:

$(document).ready(function() { 
    $('div a').click(function() { 
     var self = $(this); 
     var cssId = self.attr('id'); 
     var child = $('div#filter-op-'+cssId); 
     child.toggle(); 
    }); 
}); 

Теперь проблема заключается в том, что она не работает таким образом, но если я удалю cssId в js-коде и -1, -2 и т. д. в html, он начнет работать, но он скрывает все содержимое независимо от того, какой a я нажал.

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

JsFiddle is here

Благодаря

Answer 1

Вам необходимо внести некоторые изменения в коде JS, как это:

$(document).ready(function() { 
    $('div a').click(function() { 
    var self = $(this); 
    var cssId = self.attr('id'); 
    console.log(cssId); // This gives the `a` id. 
    var id = cssId.split("-")[1]; // Split and get the number part 
    console.log(id); 

    var child = $('div#filter-op-'+id); // append the number part here 
    child.toggle(); 
    }); 

}); 

скрипку: https://jsfiddle.net/sandenay/uk1Lquuh/1/

Answer 2

Проблема найдено: ваш cssId всегда возвращаются фильтр-1, фильтр-2, фильтр-3 , а ребенок - как «div # filter-o p - '+ cssId) ==>' div # filter-op-filter-1, который порождает неверный идентификатор дочернего div.

Я добавил дополнительные данные атрибутов

Вот мой рабочий код:

HTML:

<div><a id="filter-1" data="1">Brands</a></div> 
<div id="filter-op-1">This is option 1</div> 
<div><a id="filter-2" data="2">Size</a></div> 
<div id="filter-op-2">This is option 2</div> 
<div><a id="filter-3" data="3">Color</a></div> 
<div id="filter-op-3">This is option 3</div> 

JS:

$(document).ready(function() { 
    $('div a').click(function() { 
     var self = $(this); 
     var cssId = self.attr('data'); 
     var child = $('div#filter-op-'+cssId); 
     child.toggle(); 
    }); 

}); 

обновленный JSFIDDLE пример