Question

我在main.js中有以下代码：

(function($) {
    // Code goes here
    $.fn.switcher=function(opts)
    {
        var defaults={
            btn:'.info_btn', //Класс кнопки
            block:'.details_info', //Класс блока, который нужно скрыть
            hideifout:false, //Если true то скроект блок когда мышь его покент
            classActive:'open' //Класс который ставится активной кнопке
            //classNotActive:'close'
        };
        var options=$.extend(defaults, opts);
        this.each(
            function(){
                var $this=$(this);
                var btn=$this.find(options.btn);
                var block=$this.find(options.block);
                var plaing=false;
                var click=function(e){
                    if (e.type=='mouseleave')
                    {
                        e.stopPropagation();
                    }
                    if (plaing) return;
                    plaing=true;
                    if (block.is(':visible'))
                    {
                        block.hide('blind',function(){
                            btn.removeClass(options.classActive);
                            btn.css('z-index',0);
                            plaing=false;
                        });
                    } else {
                        btn.addClass(options.classActive);
                        btn.css('z-index',2);
                        block.show('blind',function(){

                            plaing=false;
                        });
                    }
                }

                btn.click(click);
                if (options.hideifout){
                    block.mouseleave(click);
                }

            }
        );
    }
})(jQuery);

我的aspx文件中的js代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('#listInfoBlock').load('/cinema/filmlist'); // load films by default

        $(".title").click(function (e) {
            e.preventDefault();
            loadFilmList($(this));
        });

        $("#buttonFindFilmByName").click(function (e) {
            e.preventDefault();
            loadFilmList($(this));
        });

        // load films by criteria
        function loadFilmList(id) {
                $('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"));
                $(".tabs").find("a").removeClass("active");
                $(id).parent().addClass("active");

            };
    });
</script>

函数loadFilmList填充listInfoBlock main.js中该函数的问题首先执行，并且没有名为.details_info的div（当执行loadFilmList时它会存在）

我该如何解决这个问题呢？感谢。

解：

我这样改写：

function loadFilmList(id) {
            $('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"), function () {
                $('.infoBlock').switcher();
                $('div.widgets').switcher(
                    {
                        btn: '.expand',
                        block: '.voice_block',
                        hideifout: true
                        // classActive:'expand'
                    });
            });
            if (id !== undefined) {
                $(".tabs").find("a").removeClass("active");
                $(id).parent().addClass("active");
            }            
        };

现在它的工作。
谢谢Nate。

Answer 1

问题在于你宣布$.fn.switcher但是并没有在任何地方调用它。我认为你需要在两个地方调用它，在两个.load() AJAX调用的回调函数中。

$('#listInfoBlock').load('/cinema/filmlist', function() { $.fn.switcher({ }); });

和

$('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"), function() { $.fn.switcher({ }); });

JS中的订单功能

1 个答案: