功能切換動態添加元素

可能重複：
One function to toggle multiple hidden elements?功能切換動態添加元素

我看到這個工作在的jsfiddle但不管出於什麼原因，我不能得到它的工作。代碼是這樣的，因爲我將有100多個鏈接可供選擇，而我不想製作100個不同的slideToggle函數。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<script type="text/javascript" src="jquery.js"> 

</script> 
<script type="text/javascript"> 
$('.county').click(
    function(){ 
     var thisIs = $(this).index(); 
     $('.countystats').eq(thisIs).slideToggle(300); 
    }); 
</script> 
<style type="text/css"> 
.county{ font:"Trebuchet MS", Arial, Helvetica, sans-serif; 
} 
.countystats{ 
    background-color:blue; 
    display:none; 
} 
</style> 
</head> 


<body> 



<div> 
    <a class="county" href="javascript:;">one</a> 
    <a class="county" href="javascript:;">two</a> 
</div> 
<div class="countystats">stats one</div> 
<div class="countystats">stats two</div> 
<br /> 
<br/> 
</body></html>

工作的jsfiddle網址：http://jsfiddle.net/davidThomas/ANu83/

來源

2011-03-16 user662935

你爲什麼發佈關於這個問題的第二個問題而不是在另一箇中發表評論？ - http://stackoverflow.com/questions/5327441/one-function-to-toggle-multiple-hidden-elements/5327511#5327511 –

因爲我終於創建了一個帳戶，所以我可以登錄並給予他們的答案:) – user662935

好的，你是否試過我之前問題的答案？ –

以前給你的解決方案依賴於兩件事情。

的鏈路嵌套以特定的順序在它們之間沒有任何元件的單個格內（即<br/>）
的countystats的div緊跟包含鏈接在div。

如果它仍然不起作用，發佈您的非工作代碼比發揮作用的例子會更有幫助。

來源

2011-03-16 18:48:34 agradl

這是一個不起作用的例子。至少根據Firefox和Chrome。 – user662935

不會改變它是否工作。如果使用這個index（）方法不是最好的，你知道另一種用來做我想做的事情的方法嗎？謝謝.. – user662935

工作版本如下。您的代碼有兩個問題

在定義任何這些事情之前，應執行「遍歷所有class = county和分配事件處理程序」的代碼。所以它沒有發現。在創建這些標籤後，我將該腳本移動到了一個位置。

執行var thisIs = $（this）.index（）的事件處理程序中的行。 - 我不知道爲什麼這在jsfiddle中工作（也許是不同版本的jquery？）它在我的瀏覽器中完全不起作用。我稍微重寫了它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<style type="text/css"> 
.county{ font:"Trebuchet MS", Arial, Helvetica, sans-serif;} 
.countystats{ 
    background-color:blue; 
    display:none; 
} 
</style> 
</head> 
<body> 
<div> 
    <a class="county" href="javascript:;">one</a> 
    <a class="county" href="javascript:;">two</a> 
</div> 
<div class="countystats">stats one</div> 
<div class="countystats">stats two</div> 
<script type="text/javascript"> 
$('.county').click(
    function(){ 
     var thisIs = $('.county').index(this); 
     $('.countystats').eq(thisIs).slideToggle(300); 
    }); 
</script> 
</body></html>

來源

2011-03-16 22:20:02 James

我也建議改變。點擊一個.live允許任何動態添加的內容也兌現了點擊..並在包裹的document.ready它因此它不會在文件中無論身在何處該腳本是。

$(document).ready(function(){ 
    $('.county').live('click',function(){ 
      var thisIs = $('.county').index($(this)); 
      alert(thisIs); 
      $('.countystats').eq(thisIs).slideToggle(300); 
     }); 

});

來源

2011-03-16 22:26:04 FatherStorm

功能切換動態添加元素

回答

相關問題