需要循环 jquery

Need for loop jquery

本文关键字：jquery 循环      更新时间：2023-09-26

>我有以下代码

$('.button1').click(function(){
    $('.docs_main2,.docs_main3,.docs_main4,.docs_main5,.docs_main6,.docs_main7,.docs_main8,.docs_main9,.docs_main10,.docs_main11,.docs_main12,.docs_main13,.docs_main14,.docs_main15,.docs_main16,.docs_main17,.docs_main18,.docs_main19').fadeOut("slow");
});
$('.button2').click(function(){
    $('.docs_main1,.docs_main3,.docs_main4,.docs_main5,.docs_main6,.docs_main7,.docs_main8,.docs_main9,.docs_main10,.docs_main11,.docs_main12,.docs_main13,.docs_main14,.docs_main15,.docs_main16,.docs_main17,.docs_main18,.docs_main19').fadeOut("slow");
});

在这种情况下，当我单击"button1"类名时，其他按钮 2 到 18 将被隐藏。
当我单击"button2"类名时，其他按钮 3 到 18 和按钮 1 将被隐藏。

我需要这个代码在循环中。有人可以给我这个吗？

您可以使用

for 循环，但是当您有代码在"name"+index上进行选择时，这将表明代码的语义和结构存在更深层次的问题。

我建议添加一个类（具有语义有意义的名称）并将其添加到所有元素中（只是doc_main可能起作用，例如：

<div class="doc_main1">

成为

<div class="doc_main">

这将允许你做 

$(".doc_main").hide();

元素可以有多个类。因此，如果您需要另外保留唯一的类（需要更多信息来说明），您也可以这样做。

如果您必须使用 for 循环（我从未见过必须使用 for 循环的类似情况）。你可以做：

$('.button1').click(function(){
    for(var i=2;i<=19;i++){ 
       $(".doc_main"+i).fadeOut("slow"); // please don't do this :(
    }
});

如果我可以添加最后一个提示 - 为您的类和变量选择有意义的名称。

你能编辑 HTML 吗？为什么不为每个按钮的元素分配公共类（例如"hide1"和"hide2"），如下所示：

<elem class="docs_main2 hide1"/>
<elem class="docs_main3 hide1 hide2"/>
....
<elem class="docs_main18 hide1 hide2"/>

这样，您只需按公共类进行选择：

$('.button1').click(function(){
   $('.hide1').fadeOut("slow");
});
$('.button2').click(function(){
   $('.hide2').fadeOut("slow");
});

更短、更好的代码版本

$('.button1,.button2').click(function () {
    $('[class^=docs_main]').not('.docs_main' + $(this).attr('class')replace('button', '')).fadeOut("slow");
});

引用

.not（）

属性等于选择器

^ 属性开始与选择器

.attr（）

.replace（）

$('.button1').click(function(){
  for(var i = 2; i <= 18; i++ ){
   $('.docs_main'+i).fadeOut("slow");
  }
});
$('.button2').click(function(){
  for(var i = 3; i <= 18; i++ ){
   $('.docs_main'+i).fadeOut("slow");
  }
  $('.docs_main1').fadeOut("slow");
});

尽管我强烈建议编辑您的 html，因为这样的事情会在未来的维护中令人头疼。

"我需要这段代码进入循环。"

不，你没有。使用 for 循环执行此操作是一个相当简单的练习，但您真正需要的是更好地构建您的 html。你没有显示你有什么，但我建议你给你的button元素一个公共类，并使用data-属性来指示关联的元素：

<button class="button" data-associated="dm1">Button 1</button>
<button class="button" data-associated="dm2">Button 2</button>

然后为所有这些docs_mainX元素提供相同的类（删除数字），以便您可以轻松地一次选择它们，同时为它们提供唯一 ID（或某种唯一data-属性）以将它们与关联的按钮匹配：

<div id="dm1" class="docs_main">blah blah</div>
<div id="dm2" class="docs_main">blah blah</div>

因为这样你的jQuery就变成了这样简短而简单的东西：

$(".button").click(function() {
    $(".docs_main").not("#" + $(this).attr("data-associated")).fadeOut("slow");
});

（编辑） 附言如果你的按钮元素碰巧在.docs_mainX元素内，并且想法是隐藏除单击的元素之外的所有元素，它会变得更加简单，因为你不需要任何 id 或 data- 属性，你可以从类中删除数字以使它们全部.doc_main然后做这样的事情：

$(".button").click(function() {
    $(".docs_main").not($(this).closest(".docs_main")).fadeOut("slow");
});
// OR
var $buttons = $(".button").click(function() {
    $buttons.not(this).closest(".docs_main").fadeOut("slow");
});
相关文章：