4

在这里找到了一个很好的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 中执行此操作，我只需为 href 标记设置一个 onClick 函数，类似于

 <a href="#" id="word1234" onClick="doPop(this, 'Lorem ipsum, ect.')">Supercalifragilisticexpialidocious</a>

在 JQuery 中是否有类似的调用函数的方法？

编辑 经过一些调试，可以在此处找到更新/修复脚本的工作版本：http: //jsfiddle.net/N4QCZ/13/hth 。

4

2 回答 2

2

您可以像这样将代码转换为jQuery 插件：

$.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");
于 2013-02-12T16:38:24.080 回答
1

不要使用liveuse on，从 1.7 开始不推荐使用 live ：

您可以为您的链接提供一个弹出类并执行以下操作：

$(".popup").on("click", function() {
    // Your code
});

这样您就可以捕获popup该类的所有链接，并且不绑定到 100 个事件，即：

$("#id1").click() { }
$("#id2").click() { }

等等

于 2013-02-12T16:24:17.773 回答