0

我想检查一个 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;
});
4

4 回答 4

0

你可以 在 jQuery中使用hasClass

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

  $("#checkin-gmap").animate({
        height: '500px'
    }, 500, function() {
        google.maps.event.trigger(map, "resize");
    });
 }else
{ .....
}
于 2013-03-20T19:36:02.007 回答
0

您的代码的问题是您使用了classJavaScript 中的保留字。

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

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

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

实际上，您可以完全摆脱该if声明。您可以使用该toggleClass功能来切换课程。

也没有必要使用hide()以及show()何时可以使用toggle（在注释行中）。

您可以使用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;
});

PS 你永远不应该用attr. class想象一下属性中有几个类。您必须将它们分开并检查每个是否与您的匹配。查看所有与类相关的 jQuery 方法并使用它们。

于 2013-03-20T19:36:56.997 回答
0

使用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");
    }
于 2013-03-20T19:38:11.560 回答
0

请尝试hasClass：

if ($("div", this).hasClass("mapexpand")) {
     ............
于 2013-03-20T19:38:18.947 回答