-4

我有以下代码

$('.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 循环中使用此代码。谁能给我这个。

4

5 回答 5

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

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

于 2013-09-11T10:11:10.483 回答
0

Can you edit the HTML? Why not assign common classes to the elements for each button (e.g. "hide1" and "hide2"), like this:

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

This way you can just select by the common class:

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

$('.button2').click(function(){
   $('.hide2').fadeOut("slow");
});
于 2013-09-11T10:12:47.067 回答
0 
$('.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，因为这样的事情在未来的维护中会让人头疼。

于 2013-09-11T10:14:10.560 回答
0

更短更好的代码版本

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

参考

。不是（）

属性等于选择器

^属性以选择器开始

.attr()

。代替（）

于 2013-09-11T10:14:10.523 回答
0

“我在 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-某种唯一的属性）以将它们与关联的按钮匹配：

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

（编辑）PS如果您的按钮元素碰巧在.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");
});
于 2013-09-11T10:16:53.140 回答