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>

このポップアップを呼び出すためのより効率的な方法はありますか？1ページに何百もの定義がある場合、不必要に多くのコードを繰り返すことになります。

ネイティブJSでこれを行っている場合は、onClick関数をhrefタグに設定するだけです。

 <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。 live は 1.7 で非推奨になりました:

リンクに popup クラスを指定して、次のようにすることができます。

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

そうすれば、クラスとのすべてのリンクをキャプチャでき、何popup百ものイベントにバインドされません。つまり、次のようになります。

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

等

于 2013-02-12T16:24:17.773 に答える