0

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

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

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

         })
    }
})

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

4

3 回答 3

1

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

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')在定位它之后使用类似代码或任何函数。

于 2013-11-14T01:20:02.460 回答
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>
于 2013-11-14T00:28:59.010 回答
0

我不知道您要实现什么更大的目标，但这会按照您的要求进行：

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

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

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

给你的其他一些风格说明：

  • 无需循环，click已经为 jQuery 对象中的每个元素分配了一个点击处理程序。
  • 没有必要onclick像 jQueryclick那样为你使用。
  • 不要在循环中创建函数。看起来上面的代码确实做到了这一点，但事实并非如此：它创建了一个函数实例，该实例被传递到click方法中。在for循环中，您实际上每次都会创建一个新的函数实例，这不是最佳实践。
  • 从处理函数返回一个函数onclick不会做任何事情。
  • 由于 anli 必须在 aul中，因此无需通过查找来增加选择器的复杂性'ul li'--just look for 'li'。
  • 请注意，许多 javascript 开发人员在 JS 中对字符串使用单引号，以便嵌入的 HTML 可以使用双引号。
于 2013-11-14T01:31:06.917 回答