Question

我有一段代码，当我点击一些箭头（基本上是一个滑块）时会更改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
}
}

Answer 1

您可以使用触发器来举起自己的活动。

$(this).addClass('myClass');
$(mySelector).trigger('classChanged')
$(otherSelector).bind('classChanged', data, function(){ //do stuff here });

Answer 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);

但这对于这种情况来说太过分了。

Answer 3

将所有相关代码放入点击功能...（下面的伪代码）

$('div').click(function(){
    $(this).addClass('className');
    $(this).animate();
});

监听javascript / JQuery中的类更改

3 个答案: