如何使用html標識和jQuery顯示/隱藏動態元素

我問了一個類似的問題here我想獲得一個div來顯示/隱藏，而不是所有的div。這解決了，我使用了提供的答案之一。無論如何，我遇到了一些問題，它會打開錯誤的對應div，並且建議我使用ID來打開正確的對應div。動態生成div以及它們的ID，並且它們按預期匹配。如何使用html標識和jQuery顯示/隱藏動態元素

我的問題是，jQuery腳本不再工作（我已經用上一個問題中的其他答案的建議重寫了它） - 有誰知道問題是什麼？

Here is the code (jsFiddle)

來源

2012-01-17 Bernard

就讓我們來看看在JavaScript控制檯（F12）顯示以下錯誤消息：

Uncaught ReferenceError: $index is not defined

，因爲你要使用它定義的變量$index外範圍的這一錯誤引發（在點擊處理程序中）。

這裏是一個工作修改版本具有以下改變：事件處理程序中

，使用this.id足以獲得元素的ID作爲this在事件處理程序是一個DOMElement，而不是一個jQuery對象
使用.replace（）或.substring（）來獲取id的最後兩位數字。 .charAt（）只返回在指定的位置
1個字在jquery的ID選擇是#<id> - >"#slidingDiv" + idx

僅與$前綴jquery的變量，而不是常規的變量。這只是一個慣例，但是當你看到$myvariable你再期望它是一個jQuery對象

DEMO

$(document).ready(function() { 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $(".show_hide").click(function() { 
     var id = this.id; 
     var idx = id.replace('show_hide', ''); 
     //var idx = id.substring(id.length-2); 
     var divName = "#slidingDiv" + idx; 
     $(divName).slideToggle(); 
    }); 

});

來源

2012-01-17 16:03:31

感謝您的解釋並回答Didier。按我的希望工作！ :) – Bernard 2012-01-17 16:27:56

-1

您正在尋找的方法on()然後你就可以用它來綁定事件處理程序動態生成的對象。與其合作很容易。該文檔可以找到here。

來源

2012-01-17 16:00:02

三件事 - 你已經在錯誤的地方關閉了內部函數，你應該使用.substring（）來獲得鏈接ID的最後兩個字符，並且你正在使用一個css className選擇器，而不是一個ID選擇器，當你查找相應的元素。

http://jsfiddle.net/uvLfc/

這就是說，較好的方法是將ID的數字部分中的數據屬性存儲的鏈接，或可能甚至存儲目標DIV的實際ID，例如。

<a href="#" class="show_hide" data-targetdiv="slidingDiv99"> +/-</a> 
... 
<div id="slidingDiv99">...</div> 


<script> 
$(".show_hide").click(function(){ 
    $('#' + $(this).attr('data-targetdiv')).slideToggle(); 
}); 
</script>

來源

2012-01-17 16:03:26 digitalbath

有一個錯誤的選擇之一，我也修改了邏輯以獲得slidingDiv的索引。

$(document).ready(function() { 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $(".show_hide").click(function(){ 
     var $str = $(this).attr("id"); 
     var $index = $str.replace('show_hide', ''); 


     var divName = "#slidingDiv" + $index; 
     $(divName).slideToggle(); 

    }); 

});

工作Demo

來源

2012-01-17 16:05:10 ShankarSangoli

你在你的代碼中的O型。將關閉}）置於單擊事件之外：

$(document).ready(function() { 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $(".show_hide").click(function(){ 
     var $str = $(this).attr("id"); 
     var $index = $str.charAt($str.length-2); 

     var divName = ".slidingDiv" + $index; 
     $(divName).slideToggle(); 

    }); 
});

來源

2012-01-17 16:11:42

如何使用html標識和jQuery顯示/隱藏動態元素

回答

相關問題