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

我有一系列的html内容称为从数据库中生成的过滤器。内容可以根据页面动态变化。我给每个主div分配了css ID，并在循环时附加了一个数字。下面是一个示例代码段：奇怪的jQuery行为，同时显示隐藏内容

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

的ID filter-1和filter-op-1等被循环的数量产生的，所以我们不知道如何在页面上太多的内容将为过滤器来生成。

我需要显示/隐藏通过a点击过滤器-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(); 
    }); 
});

现在的问题是，它不是以这种方式工作，但如果我在html中删除了js代码中的cssId和-1，-2等，它开始工作，但它隐藏了所有内容，无论我点击了哪个a。

我不明白是什么导致了这个问题。任何人都可以解释这个问题，并给出一些很好的建议，如何处理它？

JsFiddle is here

感谢

来源

2015-10-17 Altaf Hussain

看到它在这里工作。 https://jsfiddle.net/sandenay/uk1Lquuh/1/ –

'self.attr（'id'）'将会是'“filter- ”'而不仅仅是'“”'部分;） – Andreas

'控制台。日志（cssId）;''会帮助你理解，对未来的错误也很好，可以测试变量 – turbopipp

您需要在您的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/

来源

2015-10-17 10:31:07

谢谢Sandeep，这是我的不好，我没有注意到它。我现在明白什么是问题：P –

问题：你cssId总回报filter-1，filter-2，filter-3 和child成为'div＃filter-o p - '+ cssId）==>'div＃filter-op-filter-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>

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

来源

2015-10-17 10:44:44

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

回答

相关问题