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

Stumped on applying function to all li items

本文关键字：li 项目 应用于 功能      更新时间：2023-09-26

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

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

我正在尝试编写代码，当单击时，该代码将使选项卡淡出li。 有没有办法编写一次代码并将其应用于所有 3 li。我不确定我是否在正确的方向上。 我在想我需要使用"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) })
         })
    }
})

我知道这远非正确，但我完全被难住了。有没有更好的方法来做到这一点。感谢您的帮助

我不确定您的代码试图做什么，但这会在单击时淡化一个项目。根据名称，我假设您正在尝试淡化相应的选项卡 - 向我显示该选项卡 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>

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

.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') 或任何函数等代码。

我不知道

你想实现什么更大的目标，但这会按照你的要求去做：

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

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

如果您正在尝试完成其他任务，请更详细地描述它，以便我们为您提供更多帮助。

其他一些样式说明：

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