Question

这只是一个片段，但我会在页面上有许多不同的链接。每个链接都有一个与之关联的不同隐藏元素。我试图避免为每个链接编写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">

<head>
<link href='favicon.ico' rel='icon' type='image/jpg'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<script type="text/javascript" src="jquery.js">
</script>
<style type="text/css">
.county{ font:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.countystats{
    background-color:blue;
    display:none;
}



</style>

<script type="text/javascript">
$('.county').click(function(){
          $(this).find('.countystats').slideToggle('fast')
          });
</script>




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

我希望链接'one'显示div'stats one'，链接'two'显示div'stats two'。提前谢谢。

Answer 1

您可以使用：

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

JS Fiddle demo

请注意，我从html中删除了br以准确获取index()。如果您需要a元素为每行一个，请使用：

a {
    display: block;
}

参考文献：

Answer 2

您可以使用下面给定的切换功能来切换多个元素给出元素id数组作为输入。

例如：

     toggleElements(["elem1","elem2"],["elem3"]);
     OR
     toggleElements(arr1,arr2);

function showElements(showEls){
       for(var i=0; i<showEls.length; i++){
           if($("#"+showEls[i]).is(':hidden')) $("#"+showEls[i]).show();
       }
}
function hideElements(hideEls){
       for(var i=0; i<hideEls.length; i++){
          if($("#"+hideEls[i]).is(':visible')) $("#"+hideEls[i]).hide();
       }
}

function toggleElements(arr1,arr2){
        if(true){
            if($("#"+arr1[0]).is(":hidden")){
                 showElements(arr1);
                 hideElements(arr2);
            }else{
                 showElements(arr2);
                 hideElements(arr1);
            }
        }
}

Answer 3

理想情况下，您需要一种方法将链接链接到正确的div。您可以使用这样的数据属性来完成此操作。

HTML：

<a class="county" data-divId="stats1" href="#">one</a><br/>
<a class="county" data-divId="stats2" href="#">two</a>
<div id="stats1" class="countystats">stats one</div>
<div id="stats2" class="countystats">stats two</div>

JS：

$('.county').click(function() {
    $('#' + $(this).data('divId')).slideToggle();
});

示例 - http://jsfiddle.net/infernalbadger/6wDf9/

如果您动态生成这些链接，这应该很容易做到。

一个功能可以切换多个隐藏元素？

3 个答案: