JS中的Order函数

Order function in JS

本文关键字:函数 Order 中的 JS      更新时间:2023-09-26

我在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);

和js代码在我的aspx文件:

<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执行时它将在那里)

我该如何解决这个问题?
谢谢。

<

解决方案/strong>:

我这样重写:

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");
            }            
        };

现在是工作。
谢谢内特。

问题是您正在声明$.fn.switcher,但从未在任何地方调用它。我认为你需要在两个地方调用它,在你的.load() AJAX调用的回调函数。

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

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