Должен ли я дублировать эту функцию? - jQuery

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

Затем вы можете найти накладку для это кнопки realtively, как это:

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

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