Question

可能重复：
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/

Answer 1

我还建议将.click更改为.live以允许任何动态添加的内容也支持单击..并将其包装在document.ready中，因此脚本在文档中的位置无关紧要。

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

});

Answer 2

之前给出的解决方案依赖于两件事。

链接在单个div中以特定顺序嵌套，它们之间没有元素（即<br/>）
countystats divs会立即跟随包含链接的div。

如果它仍然不起作用，发布你的非工作代码比工作示例更有帮助。

Answer 3

随后是工作版。您的代码有两个问题

应该在定义任何这些内容之前执行应该“遍历所有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>

用于切换动态添加元素的功能

3 个答案: