自定义JQuery css背景滑块问题与导航

Question

我写了一个简单的背景滑块，它使用css背景图片作为幻灯片，可以在这里查看： http://jsfiddle.net/yfRUs/

$(".project h2").click(function() {
    if ($(this).parent().hasClass('opened')) {
        $(".projectbgs").remove();
        var projectid = $(this).parent().data("projectid");
        var titlewidth = $(this).width();
        var titleholderwidth = $(this).parent().width();
        var titleposition = titleholderwidth - titlewidth;
        $(this).css({left: 0});
        $(this).animate({'margin-right': 0}, 300);
        $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''});
        $(".project").removeClass("opened");
    }
    else {
        $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''});
        $(".project").removeClass("opened");
        $(".projectbgs").remove();
        var projectid = $(this).parent().data("projectid");
        $(this).parent().addClass('opened', 500);
        var titlewidth = $(this).width();
        var titleholderwidth = $(this).parent().width();
        var titleposition = titleholderwidth - titlewidth;
        $(this).css({left: titleposition});
        $(this).animate({'margin-left': 0}, 300);

        if (projectid === 1) {
            $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs">   <ul class="bgimages">    <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg\');"> </li>     <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg\');"> </li>  </ul> </div>'));
        }
        else if (projectid === 2) {
            $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs">   <ul class="bgimages">    <li class="image" style="background-image: url(\'http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg\');"> </li>   <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg\');"> </li>    </ul> </div>'));
        }
        var viewportwidth = $(window).width();
        $('#projectbg-' + projectid + ' ul li').each(function(index) {
            $(this).css({width: viewportwidth});
        });
        $(window).resize(function() {
            $('#projectbg-' + projectid + ' ul li').each(function(index) {
                $(this).css({width: viewportwidth});
            })
        });
        var triggers = $('#project-' + projectid + ' ul.triggers li');
        var images = $('ul.bgimages li');
        var lastElem = triggers.length - 1;
        var mask = $('.projectbgs ul.bgimages');
        var imgWidth = images.width();
        var target;
        triggers.first().addClass('active');
        mask.css('width', imgWidth * (lastElem + 1) + 'px');
        function sliderResponse(target) {
            mask.stop(true, false).animate({'left': '-' + imgWidth * target + 'px'}, 1000);
            triggers.removeClass('active').eq(target).addClass('active');
        }
        triggers.click(function() {
            if (!$(this).hasClass('active')) {
                target = $(this).index();
                sliderResponse(target);
                resetTiming();
            }
        });
        function sliderTiming() {
            target = $('ul.triggers li.active').index();
            target === lastElem ? target = 0 : target = target + 1;
            sliderResponse(target);
        }
        var timingRun = setInterval(function() {
            sliderTiming();
        }, 7000);
        function resetTiming() {
            clearInterval(timingRun);
            timingRun = setInterval(function() {
                sliderTiming();
            }, 7000);
        }
    }
});

要查看“未知问题”，请在右侧打开第一个PROJECT（单击标题），然后单击代表幻灯片的2个小方框（您可能需要滚动jsfiddle窗口，因为它是为1024+分辨率构建的）。

然后打开项目2并滚动幻灯片，现在回到项目1并尝试滚动 - 它将无效！我真的很困惑，因为没有错误被抛出？

任何人都知道出了什么问题？

Answer 1

问题是click事件没有正确解除绑定，并且在从一个项目转换到另一个项目时没有停止间隔。为此，您需要在事件处理程序之外定义triggers和timingRun，并在每次进入处理程序时重置它们：

if(triggers){
    triggers.off('click');
    triggers = null;
}
if(timingRun){
    clearInterval(timingRun);
    timingRun = null;
}

完整的代码片段如下：

var triggers,
timingRun;

$(".project h2").click(function() {
    if(triggers){
        triggers.off('click');
        triggers = null;
    }
    if(timingRun){
        clearInterval(timingRun);
        timingRun = null;
    }
    if ($(this).parent().hasClass('opened')) {
        $(".projectbgs").remove();
        var projectid = $(this).parent().data("projectid");
        var titlewidth = $(this).width();
        var titleholderwidth = $(this).parent().width();
        var titleposition = titleholderwidth - titlewidth;
        $(this).css({left: 0});
        $(this).animate({'margin-right': 0}, 300);
        $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''});
        $(".project").removeClass("opened");
    }
    else {
        $('.project h2').css({'margin-left': 'auto', 'font-size': '', 'color': ''});
        $(".project").removeClass("opened");
        $(".projectbgs").remove();
        var projectid = $(this).parent().data("projectid");
        $(this).parent().addClass('opened', 500);
        var titlewidth = $(this).width();
        var titleholderwidth = $(this).parent().width();
        var titleposition = titleholderwidth - titlewidth;
        $(this).css({left: titleposition});
        $(this).animate({'margin-left': 0}, 300);

        if (projectid === 1) {
            $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs">   <ul class="bgimages">    <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg\');"> </li>     <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg\');"> </li>  </ul> </div>'));
        }
        else if (projectid === 2) {
            $('body').append($('<div id="projectbg-' + projectid + '" class="projectbgs">   <ul class="bgimages">    <li class="image" style="background-image: url(\'http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg\');"> </li>   <li class="image" style="background-image: url(\'http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg\');"> </li>    </ul> </div>'));
        }
        var viewportwidth = $(window).width();
        $('#projectbg-' + projectid + ' ul li').each(function(index) {
            $(this).css({width: viewportwidth});
        });
        $(window).resize(function() {
            $('#projectbg-' + projectid + ' ul li').each(function(index) {
                $(this).css({width: viewportwidth});
            })
        });
        triggers = $('#project-' + projectid + ' ul.triggers li');
        var images = $('ul.bgimages li');
        var lastElem = triggers.length - 1;
        var mask = $('.projectbgs ul.bgimages');
        var imgWidth = images.width();
        var target;
        triggers.first().addClass('active');
        mask.css('width', imgWidth * (lastElem + 1) + 'px');
        function sliderResponse(target) {
            mask.stop(true, false).animate({'left': '-' + imgWidth * target + 'px'}, 1000);
            triggers.removeClass('active').eq(target).addClass('active');
        }
        triggers.click(function() {
            if (!$(this).hasClass('active')) {
                target = $(this).index();
                sliderResponse(target);
                resetTiming();
            }
        });
        function sliderTiming() {
            target = $('ul.triggers li.active').index();
            target === lastElem ? target = 0 : target = target + 1;
            sliderResponse(target);
        }
        timingRun = setInterval(function() {
            sliderTiming();
        }, 7000);
        function resetTiming() {
            clearInterval(timingRun);
            timingRun = setInterval(function() {
                sliderTiming();
            }, 7000);
        }
    }
});