Javascript 在将函数应用于所有li项时遇到困难

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

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

---

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

我不确定您的代码试图做什么，但这会使单击的项目褪色。基于这些名称，我假设您正在尝试淡出相应的选项卡-向我显示该选项卡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>

1.
2.
3.

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

HTML

---

也有很多替代方法，但我认为这一种方法对于您的目的来说很简单。您还可以输入

value=2

等来列出项目，并使用这些项目来识别值，然后对变量ID进行操作，使用类似

$（“#tab'+varValue”）.fadeOut（'slow'）

的代码或在确定目标后使用的任何函数。

我不知道您试图实现的更大目标，但这将按照您的要求进行：

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

对于jQuery匹配集的每个成员（这里是所有三个

li

元素），为每个元素分配一个单击函数。单击后，

this

引用将引用已单击的项——因此您可以将其包装到jQuery对象中，并将其淡出。单击后，

li

元素将淡出

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

为您准备的其他一些样式注释：

• 无需循环，

  click

  已经为jQuery对象中的每个元素分配了一个click处理程序
• 无需使用

  onclick

  ，因为jQuery的

  单击

  可以为您完成这项工作
• 不要在循环中创建函数。看起来上面的代码可能正是这样做的，但它没有：它创建了函数的一个实例，并将其传递到

  click

  方法中。在

  for

  循环中，实际上每次都创建一个新的函数实例，这不是最佳实践
• 从

  onclick

  处理程序函数返回函数不会有任何作用
• 由于

  li

  必须位于

  ul

  内部，因此无需通过查找

  'ul li'

  来增加选择器的复杂性——只需查找

  'li'

• 注意，许多javascript开发人员在JS中对字符串使用单引号，因此嵌入式HTML可以使用双引号

---

那么每个

li

都是一个按钮？你不需要绕着它们转。jQuery可以同时将函数分配给所有这些函数。（您应该使用jQuery的

click（）

，而不是您自己的）。但是，您似乎有多个无法工作的

#选项卡。除非你想让所有按钮都在同一个选项卡上工作……选项卡的标记在哪里？我想他想在单击
li
时淡出一些其他元素，但你是对的，它不清楚。
$（“#选项卡”）。not
意味着不止一个
$（“#选项卡”）
，不能重复ID，标记中没有任何ID支持其他选择器创建。需要改进你的代码谢谢你指出@charlietfl。当我把它打出来的时候，我错过了
<ul>
    <li id="tab1" class="tab">1</li>
    <li id="tab2" class="tab">2</li>
    <li id="tab3" class="tab">3</li>
</ul>

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

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