javascript - 一个函数可以切换多个隐藏元素?

标签 javascript jquery

这只是一个片段,但我会在页面上有许多不同的链接。每个链接都有一个与其关联的不同隐藏元素。我试图避免为每个链接编写 100 个不同的 slipToggle 语句来显示它们各自的隐藏元素。这接近吗?

<!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>

我希望链接“一”显示“统计一”的 div,链接“二”显示“统计二”的 div。提前致谢。

最佳答案

您可以使用:

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

JS Fiddle demo .

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

a {
    display: block;
}

引用文献:

关于javascript - 一个函数可以切换多个隐藏元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5327441/

相关文章:

javascript - 浏览器后退按钮显示服务器发送的保留页面状态,但使用 javascript 完成的任何 DOM 修改都不会被保留

javascript - 根据页面内容高度自动扩展侧边框

jquery - Angular 2 + Typescript + jQuery + webpack : $ not defined

来自div下的jquery slidein

jQuery 如果选中复选框则禁用其他复选框

javascript - 禁用javascript时,页面不能回传

javascript - 为什么做 {} 和 {};在 JS 中评估不同?

javascript - reactjs如何更新状态

javascript - jquery/javascript - 如何比较数组、检索数组)与最大元素数?

javascript - 如何将身份验证 header 传递给其他组件