奇怪的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行爲，同時顯示隱藏內容

回答

相關問題