Question

我想检查div的类，并在单击时将其更改为另一个。

我的if语句肯定有问题。

我会非常感激。

$("#mapresize").click(function() {
    if (this.className == "mapexpand width100") {
        $("div", this).attr('class', 'mapcollapse width100');
        $("#checkin-gmap").animate({
            height: '500px'
        }, 500, function() {
            google.maps.event.trigger(map, "resize");
        });
        // $(".checkinmap-control").show("500");
    } else {
        $(this).attr('class', 'mapexpand width100');
        $("#checkin-gmap").animate({
            height: '250px'
        }, 500, function() {
            google.maps.event.trigger(map, "resize");
        });
        // $(".checkinmap-control").hide("500");
    }
    return false;
});

Answer 1

你可以在jQuery中使用hasClass

if($('#mydiv').hasClass('mapexpand')){

  $("#checkin-gmap").animate({
        height: '500px'
    }, 500, function() {
        google.maps.event.trigger(map, "resize");
    });
 }else
{ .....
}

Answer 2

您的代码存在问题，您使用的是class这个词，这是JavaScript中的保留字。

if ($("div", this).attr(class) == "mapexpand")

你应该像这样使用字符串“class”：

if ($("div", this).attr('class') == "mapexpand")

实际上你可以完全摆脱if陈述。您可以使用toggleClass功能切换班级。

如果您可以使用toggle（在注释行中），则无需使用hide()和show()。

您可以将toggle与两个函数一起使用，这样就无需检查类来决定要执行哪个动画。

就像那样：

$(".mapexpand").click(function() {
    $("div", this).toggleClass('mapexpand mapcollapse');

    $("#checkin-gmap").toggle(function() {
        $(this).animate({
            height: '500px'
        }, 500, function() {
            google.maps.event.trigger(map, "resize");
        });
    }, function() {
        $(this).animate({
            height: '250px'
        }, 500, function() {
            google.maps.event.trigger(map, "resize");
        });
    });
    // $(".checkinmap-control").toggle("500");
    return false;
});

P.S。你永远不应该用attr来检查是否存在这样的类。想象一下class属性中有几个类。您必须将它们分开并检查每一个是否与您的相匹配。请参阅all class-related jQuery methods并改为使用它们。

Answer 3

使用hasClass，removeClass和addClass ...试试这个：

$(".mapexpand").click(function() {
    var j = $("div", this);
    var cls = 'mapexpand';
    if (!j.hasClass(cls)) {
        j.addClass(cls);
        $("#checkin-gmap").animate({
            height: '500px'
        }, 500, function() {
            google.maps.event.trigger(map, "resize");
        });
        // $(".checkinmap-control").show("500");
    } else {
        j.removeClass(cls);
        $("#checkin-gmap").animate({
            height: '250px'
        }, 500, function() {
            google.maps.event.trigger(map, "resize");
        });
        // $(".checkinmap-control").hide("500");
    }

Answer 4

请尝试hasClass：

if ($("div", this).hasClass("mapexpand")) {
     ............

if语句检查div的类

4 个答案: