Повторно используемые компоненты Javascript
Я использую JQuery's slideToggle()
функция в моем веб-приложении.
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle();
});
});
HTML часть
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
Мое веб-приложение содержит много таких элементов, которые должны быть slideToggled
, Я хочу написать функцию JavaScript только один раз и вызывать ее каждый раз, когда мне нужно реализовать slideToggle
, Как мне это сделать?
2 ответа
Дайте элементам класс и, например, атрибут данных, тогда вы можете сделать
$(function(){
$(".flip").on("click",function(){
$("#"+$(this).data("panelId")).slideToggle();
});
});
С помощью
<div class="flip" data-panelId="panel1">Click to slide the panel 1 down or up</div>
<div id="panel1">Hello world!</div>
<div class="flip" data-panelId="panel2">Click to slide the panel 2 down or up</div>
<div id="panel2">Hello world!</div>
Если элемент для переключения всегда следующий, то код
$(function(){
$(".flip").on("click",function(){
$(this).next().slideToggle();
});
});
используя этот HTML, где я тоже даю классам панели, чтобы скрыть их при загрузке страницы, используя .panel { display:none; }
<div class="flip">Click to slide the panel 1 down or up</div>
<div class="panel">Hello world 1</div>
<div class="flip">Click to slide the panel 2 down or up</div>
<div class="panel">Hello world 2</div>
Вы можете использовать определенный класс, который будет использоваться для скольжения элементов. Допустим
<div class="sliding otherclass">Text</div>
<span>Some text</span>
<ul class="sliding">
<li>List one</li>
<li>List two</li>
</ul>
<button>Show Them</button>
Сейчас использую
$('.sliding').click(function () {
$(this).slideToggle();
})
Таким образом, каждый элемент с классом скольжения будет переключаться, а другие останутся такими, как есть! Каждый класс будет применен, но функция будет работать только тогда, когда класс sliding
нажата. И функция будет работать только для текущего элемента, а не для других.
Чтобы просмотреть их обратно, используйте это:
$('button').click(function () {
$('.sliding').slideDown();
})
http://jsfiddle.net/afzaal_ahmad_zeeshan/BC6T3/3/
Вот скрипка для этого: http://jsfiddle.net/afzaal_ahmad_zeeshan/BC6T3/1/