Нужно ли дублировать эту функцию? - JQuery - PullRequest
Новая
       17

Нужно ли дублировать эту функцию? - JQuery

0 голосов
/ 22 февраля 2010

Я использую эту функцию для создания прозрачного наложения информации на текущий div для веб-приложения для мобильных устройств.

Фон: используется jQTouch, поэтому у меня есть отдельные div, а не отдельные страницы, загружающие новые. 

$(document).ready(function() { 
    $('.infoBtn').click(function() {
        $('#overlay').toggleFade(400);
        return false;    
     });
 });

Понимание того, что JS будет работать последовательно, когда я нажму кнопку на первом div, функция работает нормально. Когда я перехожу к следующему div, если я нажимаю ту же кнопку, ничего не происходит, когда отображается этот div, но если я возвращаюсь к первому div, он фактически вызывает его на этой странице.

Итак, я логически продублировал функцию и изменил имена селекторов CSS, и это работает для обоих.

Но нужно ли это делать для каждого использования? Можно ли использовать одни и те же селекторы, но загружать разное содержимое в каждом варианте?

Ответы [ 2 ]

0 голосов
/ 05 июня 2010

Лучший способ сделать это - сделать все 1001 * относительным , так что у вас есть разметка, подобная этой: 

<div class="container">
  <div class="overlay">Overlay content</div>
  <button class="infoBtn">Click to show overlay</button>
</div>

Тогда вы действительно сможете найти оверлей для этой кнопки, например: 

$(function() { //equivalent to $(document).ready(function() {
  $('.infoBtn').click(function() {
    $(this).closest('.container').find('.overlay').toggleFade(400);
    return false;
  });
});

Вы можете оптимизировать это далее, например, .children('.overlay') если оверлей всегда является прямым потомком контейнера. Это идет от текущей кнопки (this), находит .container, в котором она используется .closest(), а затем находит .overlay внутри нее, используя .find(). При таком подходе у вас есть один небольшой кусочек кода для обработки всех ваших привязок, который намного проще поддерживать:)

0 голосов
/ 22 февраля 2010

Хотелось бы что-нибудь подобное? Я предполагаю, что вы хотите, чтобы разные кнопки вызывали toggleFade на разных оверлейных элементах. 

function makeOverlayHandler(selector) {
    return function() {
        $(selector).toggleFade(400);
        return false;
    }
}

$('button selector').click(makeOverlayHandler('#overlay1'));
$('another button selector').click(makeOverlayHandler('#overlay2'));

Вы также можете изменить makeOverlayHandler параметр selector на объект jQuery вместо селектора и вызвать его так: makeOverlayHandler($('#overlay1')).

...