显示隐藏内容时的奇怪jQuery行为

Question

我有一系列名为filters的html内容，它是从数据库生成的。内容可以根据页面动态变化。我给每个主div提供了css I，并在循环时添加了一个数字。下面是一个示例片段：

<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>

ids、filter-1和filter-op-1等是由循环数生成的，因此我们不知道页面上将为过滤器生成多少内容。

我需要通过单击a显示/隐藏filter x内容，因此我编写了以下jQuery代码：

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

现在的问题是，它不是这样工作的，但是如果我删除js代码中的cssId和html中的-1、-2等，它就开始工作了，但是它隐藏了所有的内容，不管我单击了哪个a。

我不知道是什么引起了这个问题。任何人都可以解释这个问题，并给出一些好的建议如何处理它？

JsFiddle来了

谢谢

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总是返回filter-1、filter-2、filter-3和子函数“div #filter-op-”+cssId) ==>‘div#filter-op-1，这会产生子div的错误id。

我增加了额外的数据属性

这是我的工作代码：

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>

联署材料：

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

});

更新的JSFIDDLE示例