Question

我有一系列名为过滤器的html内容，它们是从数据库生成的。内容可以根据页面动态更改。我已经为每个主div提供了css ID，并在循环时附加了一个数字。以下是一个示例代码段：

<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-op-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 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总是返回filter-1，filter-2，filter-3 和孩子成为＆＃39; div＃filter-op - ＆＃39; + cssId）==＆gt; ＆＃39; div＃filter-op-filter-1，它产生了错误的id 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示例

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

2 个答案: