Уменьшение дублированного кода с помощью функции JQuery
Найдена хорошая функция всплывающего окна jquery:
JAVASCRIPT
$(function() {
$("#word1234").live('click', function(event) {
$(this).addClass("selected").parent().append('
<div class="messagepop pop">"Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt</div>');
$(".pop").slideFadeToggle()
$("#email").focus();
return false;
});
$(".close").live('click', function() {
$(".pop").slideFadeToggle();
$("#contact").removeClass("selected");
return false;
});
HTML
<a href='/word1234' id='word1234'>Supercalifragilisticexpialidocious</a>
Есть ли более эффективный способ вызова этого всплывающего окна? Если у меня есть сотни определений на странице, я бы повторял много кода, казалось бы, излишне.
Если бы я делал это в родной JS, я бы просто установил функцию onClick в тег href, что-то вроде
<a href="#" id="word1234" onClick="doPop(this, 'Lorem ipsum, ect.')">Supercalifragilisticexpialidocious</a>
Есть ли аналогичный метод вызова функции в JQuery?
ИЗМЕНИТЬ
После некоторой отладки рабочая версия обновленного/фиксированного script может быть найдена здесь: http://jsfiddle.net/N4QCZ/13/ hth.
Ответы
Ответ 1
Вы можете превратить код в jQuery Plugin следующим образом:
$.fn.myPopup = function(popupText){
var popupHtml = '<div class="messagepop pop">' + popupText + '</div>';
this.each(function(){
$(this).click(function(){
// Create the popup
$(this).addClass("selected").parent().append(popupHtml);
// Find the close button and attach click handler
$(this).find(".close").click(
// Find, hide, then delete the popup
$(this).closest(".pop").slideFadeToggle().remove();;
);
});
return false;
});
return this;
};
Тогда ваш код будет выглядеть так:
$("#word1234").myPopup("Lorem Ipsum");
$("#wordABCD").myPopup("Hello World");
Ответ 2
Не используйте live
use on
, live был устарел с 1.7:
Вы можете дать своим ссылкам всплывающий класс и сделать:
$(".popup").on("click", function() {
// Your code
});
Таким образом, вы можете захватить все ссылки с помощью класса popup
и не привязываться к 100 событиям, то есть:
$("#id1").click() { }
$("#id2").click() { }
и др.