Question

我有以下代码

$('.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和button1将被隐藏。

我需要for循环中的这段代码。有人能为我提供这个。

Answer 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 :(
    }
});

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

Answer 2

你能编辑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");
});

Answer 3

$('.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，因为这样的事情会让你在未来的维护中感到头疼。

Answer 4

更短更好的代码版本

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

参考

.not()

attribute-equals-selector

^ attribute-starts-with-selector

.attr()

.replace()

Answer 5

“我需要for循环中的代码。”

不，不。使用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-属性kind）将它们与相关按钮相匹配：

<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");
});

（EDIT）P.S。如果您的按钮元素恰好位于.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");
});

需要循环jquery

5 个答案: