Повторно используемые компоненты 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>

Если элемент для переключения всегда следующий, то код

Live Demo

 $(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/

Другие вопросы по тегам