0

当我单击一些箭头（基本上是滑块）时，我有一段代码会更改 div 的类，但我找不到 jquery 代码，尽管它会监听类何时更改并执行动画。例如，我需要它来执行此功能。

if(*classname* == slide1){
    //************ Background Settings *************
    $(".background").css('background','url("img/park.png")')
    //************ slide 1 Animations *************
    $(".s1").animate({
        opacity:1
    },500)
    $("#header1").animate({
        opacity:1
    },500)
    $("#p1").animate({
        opacity:1
    },500)
    $("#image1").animate({
        left:140
    },1000)
}

我的班级更改代码是这样的

var page_number = 0

function next(){

var current_slide = page_number;
if(current_slide == 0){
$("section").removeClass('starterslide').addClass('slide2')
page_number = 2
}
else if(current_slide == 1){
$("section").removeClass('slide1').addClass('slide2')
page_number = 2
}
else if(current_slide == 2){
$("section").removeClass('slide2').addClass('slide3')
page_number = 3
}
else if(current_slide == 3){
$("section").removeClass('slide3').addClass('slide1')
page_number = 1
}
}

function back(){
var current_slide = page_number;

if(current_slide == 0){
$("section").removeClass('starterslide').addClass('slide3')
page_number = 3
}
else if(current_slide == 1){
$("section").removeClass('slide1').addClass('slide3')
page_number = 3
}
else if(current_slide == 2){
$("section").removeClass('slide2').addClass('slide1')
page_number = 1
}
else if(current_slide == 3){
$("section").removeClass('slide3').addClass('slide2')
page_number = 2
}
}
4

3 回答 3

2

您也可以扩展这 2 个 jQuery 函数，例如：

(function($) {
    classFuncs = {add:$.fn.addClass,remove:$.fn.removeClass}
    $.fn.addClass = function() {
        classFuncs.add.apply(this,arguments);
        if ($(this).is($('section'))) {
            // do whatever you like when a class is added
            // if it is a 'section' node
        }
        return $(this);
    }
    $.fn.removeClass = function() {
        classFuncs.remove.apply(this,arguments);
        if ($(this).is($('section'))) {
            // do whatever you like when a class is removed
            // if it is a 'section' node
        }
        return $(this);
    }
})(jQuery);

但这对于这种情况来说有点过头了。

于 2012-11-26T18:14:44.423 回答
2

您可以使用触发器来引发您自己的事件。

$(this).addClass('myClass');
$(mySelector).trigger('classChanged')
$(otherSelector).bind('classChanged', data, function(){ //do stuff here });
于 2012-11-26T18:04:14.763 回答
0

将所有相关代码放在一个点击函数中......（下面的伪代码）

$('div').click(function(){
    $(this).addClass('className');
    $(this).animate();
});
于 2012-11-26T18:02:59.467 回答