Question

我正在尝试接受我网站上所有links#modal_trigger的JS插件，但它仅适用于第一个。怎么了？我无法了解。

我的JS代码：

(function($){
    $.fn.extend({
        leanModal:function(options){
            var defaults={top:100,overlay:0.5,closeButton:null};
            var overlay=$("<div id='lean_overlay'></div>");
            $("body").append(overlay);
            options=$.extend(defaults,options);
            $(this).each(function(i){
                var o=options;
                $(this).bind('click', function(e) {
                    var modal_id=$(this).attr("href");
                    $("#lean_overlay").bind('click', function() {close_modal(modal_id)});
                    $(o.closeButton).bind('click', function() {close_modal(modal_id)});
                    var modal_height=$(modal_id).outerHeight();
                    var modal_width=$(modal_id).outerWidth();
                    $("#lean_overlay").css({"display":"block",opacity:0});
                    $("#lean_overlay").fadeTo(200,o.overlay);
                    $(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});
                    $(modal_id).fadeTo(200,1);e.preventDefault()
                })
            });
            function close_modal(modal_id){
                $("#lean_overlay").fadeOut(200);
                $(modal_id).css({"display":"none"})
            }
        }
    })
})(jQuery);

并且：

<script type="text/javascript">
    $("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
        $(function(){
        $(".user_login").show();
    });
</script>

Answer 1

无法正常工作的原因是您的文档中有多个元素具有相同的ID。您需要使用类，并使用类选择器。当您有多个具有相同ID myId的元素时，$('#myId')将只返回一个元素。因此，请为您的元素添加一个类class="modal_trigger"并使用选择器$('.modal_trigger')。

JS函数仅适用于一个（第一个）元素

1 个答案: