2015-06-05 3 views
1

Попытка выработать, если на моей странице есть несколько кнопок переключения, не повторяя jQuery .toggleClass для каждой кнопки (с разными идентификаторами)? Может быть, использовать «этот» или какой-то другой метод?Несколько кнопок переключения, 1 код jQuery

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("p").toggle('fast'); 
 
    }); 
 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
</head> 
 
<body> 
 

 
<button>Toggle</button> 
 

 
<p>This is a paragraph with little content.</p> 
 
<p>This is another small paragraph.</p> 
 
    
 
<button>Toggle</button> 
 

 
<p>This is a paragraph with little content.</p> 
 
<p>This is another small paragraph.</p> 
 

 
</body> 
 
</html>

Заранее спасибо!

+0

вы против добавления дополнительной HTML для решения т.е. HTTP : //jsfiddle.net/86gw6a2j/ – BuddhistBeast

+0

Нет, это потрясающе @BuddhistBeast. Это исправляет большую часть моей страницы. Что относительно кнопки закрытия у меня есть внизу каждого информационного окна? Я обновил JSFiddle https: // jsfiddle.net/86gw6a2j/1/ –

+0

Будет ли e закрыть кнопку, чтобы закрыть окно? Что-то вроде [этого] (https://jsfiddle.net/86gw6a2j/2/) – BuddhistBeast

ответ

0

для переключения на следующий р необходимо использовать .next()

$(document).ready(function(){ 
    $("button").click(function(){ 
     $(this).next('p').fadeToggle('fast'); 
    }); 
}); 

для переключения на следующий р и следующий следующий р необходимо использовать .next()

$(document).ready(function(){ 
     $("button").click(function(){ 
      $(this).next('p').fadeToggle('fast'); 
      $(this).next().next().fadeToggle('fast'); 
     }); 
    }); 

вы можете выберите кнопку иду как

$("#button1, #button2").click(); 

Я не предпочитаю свой HTML структуру .. если вы можете поместить каждую кнопку и ее P в одном DIV будет иметь tter для обработки

0

Вы можете использовать делегирование событий.

Например, если вы связываете событие click с кнопками. Я думаю, вы можете использовать атрибут или данные, чтобы различать, какая кнопка запускается. Затем вы можете двигаться вперед.

0

$ (функция() { $ ('# тумблер event1, # тумблер event2, # тумблер event3, # тумблер event4, # тумблер event5'). Изменить (функция() { пусть State1 = $ (это) .prop ('проверен'); // предупреждение ("Первый обработчик .toggle() называется.");?

    alert(this.id);}) 
+0

Требуется форматирование бит – Billa

Смежные вопросы