Question

这可能是一个愚蠢的问题。我在网站上查找答案，但可能无法正确搜索。

<ul>
   <li id="tab1">1</li>
   <li id="tab2">2</li>
   <li id="tab3">3</li>
</ul>

我正在尝试编写代码，当点击时，该代码会让标签淡出li。有没有办法一次编写代码并将其应用于所有3 li s。我不确定我是否正朝着正确的方向前进。我以为我需要使用“if语句”，这是我到目前为止所拥有的......

(function() {
    var lists = $("ul li");

      for(var i = 0; i < items.length; i++)
    {    
         buttons[i].onclick=(function(){      
         var n = i,
         tabs = $("#tab");  

       return function(){
        tabs + n.click.fadeOut(500) })

         })
    }
})

我知道这远非正确，但我对此完全感到困惑。是否有更好的方法来做这件事。谢谢你的帮助

Answer 1

我不确定您的代码尝试做什么，但这会在点击时淡化项目。基于这些名称我假设您正在尝试淡化相应的标签 - 向我显示标签html，我会更新此答案。

$("ul").on("click", "li", function() {
   //guess on fading the tab:
   $("#tabs div").not("." + this.id).fadeOut(500);//fadeout other tabs
   $("#tabs ." + this.id).fadeIn(500); //fade in this tab
})

如果您的标签html如下，这将淡出所有标签并淡化点击的标签：

<div id="tabs">
    <div class="tab1">1</div>
    <div class="tab2">2</div>
    <div class="tab3">3</div>
</div>

Answer 2

是。答案比你想象的要简单。在核心，它是如何识别可变数量的列表。一些可能的解决方案：

HTML

<ul>
    <li id="tab1" class="tab">1</li>
    <li id="tab2" class="tab">2</li>
    <li id="tab3" class="tab">3</li>
</ul>

JS

$(".tab").click(function() {
    $(this). //do a function
});

还有很多替代方法，但我觉得这个方法很简单。您还可以输入value=2等列出项目，并使用它们来识别值，然后对变量ID执行操作，使用$('#tab'+varValue).fadeOut('slow')之类的代码或定位后的任何函数。

Answer 3

我不知道你想要达到什么更大的目标，但这会像你似乎问过的那样：

$('li').click(function() {
   $(this).fadeOut(500);
});

对于jQuery匹配集的每个成员（此处，所有三个li元素），为每个成员分配一个click函数。单击后，this引用将引用单击的项目 - 因此您可以将其包装到jQuery对象中，然后将其淡出。点击后li元素会淡出。

如果您正在尝试完成其他工作，请详细说明，以便我们为您提供更多帮助。

其他一些风格笔记：

无需循环，click已经为jQuery对象中的每个元素分配了一个单击处理程序。
没有必要使用onclick，因为jQuery的click会为您做到这一点。
不要在循环内创建函数。它可能看起来像上面的代码那样，但它没有：它创建了一个函数实例，它被传递到click方法。在for循环中，您实际上每次都会创建一个新的函数实例，这不是最佳实践。
从onclick处理函数返回函数不会做任何事情。
由于li 必须位于ul内，因此无需通过查找'ul li'来提高选择器的复杂性 - 只需查看{{ 1}}。
请注意，许多javascript开发人员在JS中使用单引号作为字符串，以便嵌入式HTML可以使用双引号。

难以将功能应用于所有li项目

3 个答案: