jquery - JQuery 显示/隐藏没有硬编码的 id

Question

我想让 jQuery 函数显示/隐藏一些元素（现在是<li>）；

所以，我有这个代码：

.sub {
    display: none;
}

 ....

$(function show_sub(id) {
    $('#'+id).show('fast');
});

 .....

<a href="" onmouseover="show_sub('id1')" onclick="return false;"> Here is it </a> 
<li id="id1" class="sub"> .... </li>

在 Internet 上，我只找到了必须对元素的 id 进行硬编码的函数。

我知道我的 jQuery 函数不正确。

请帮我！

Answer 1

你可以像这样清理你的代码

html

<a href="#"> Here is it </a> 
<li class="sub"> .... </li>

Javascript

$(function() {
    $('a[href="#"]')
       .on('hover', function() {
           $(this).next('li').show('fast'); // or toggle();
       })
       .on('click', function(ev) {
           ev.preventDefault()
       })
});

这样做可以避免无用的标记、冗余信息和内联处理程序。

小提琴示例：http: //jsfiddle.net/GYye8/

Answer 2

您需要获取要显示/隐藏的元素。通过 id 获取它是一种方法，但还有更多方法。

看看jquery 选择器。

例如，您可以通过以下方式显示具有“子”类的元素：

$(".sub").show();

Answer 3

$("li.sub").show()显示所有li与类sub。

这就是你所追求的吗？

Answer 4

你可以试试下面的代码

html

<a href="#" class="li-toggler" data-toggle="id1">li toggler</a>   
<li id="id1">sometext</li>​

js

$("a.li-toggler").click(function() {
   $("#"+$(this).attr("data-toggle")).toggleClass("sub");
});

​</p>