Необходимость петли JQuery

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 и кнопка1.

Мне нужен этот код для циклов. Может кто-нибудь мне это предоставит.

Answer 1

Вы можете использовать цикл for, но когда у вас есть код, который делает выбор на "name"+index, это указывает на более глубокую проблему в семантике и структуре вашего кода.

Я предлагаю добавить класс (с семантическим значимым именем) и добавить, что ко всем элементам (просто doc_main может work` так, например:

<div class="doc_main1"> 

Становится

<div class="doc_main"> 

, которые позволили бы вы должны сделать

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

Элементы могут иметь несколько классов. o если вам нужно сохранить уникальный класс дополнительно (нужно больше информации рассказать), вы тоже можете это сделать.

Если вы должны использовать цикл (и я имею никогда не видел подобный случай, который имел использовать для цикла). Вы можете сделать:

$('.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 - довольно тривиальное упражнение, но то, что вам действительно нужно, - это лучше структурировать ваш html. Вы не показываете, что у вас есть, но я бы рекомендовал, что вы даете button элементов общий класс и использовать атрибут data- для обозначения соответствующих элементов:

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

А потом дать все эти docs_mainX элементов же класс (падение числа), так что вы можете легко выбрать их все сразу, в то время предоставляя им уникальные идентификаторы (или уникальных 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"); 
}); 

(EDIT) P.S. Если элементы вашей кнопки находятся внутри элементов .docs_mainX, и идея состоит в том, чтобы скрыть все, кроме тех, которые были нажаты, становится еще проще, потому что вам не нужны никакие идентификаторы или атрибуты 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"); 
});