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

コードの問題はclass、JavaScript の予約語である単語を使用していることです。

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

次のように文字列「class」を使用する必要があります。

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

if実際には、ステートメントを完全に取り除くことができます。toggleClassクラスを切り替える機能を使用できます。

また、使用する必要はありませんhide()(コメント行で)show()使用できる場合。toggle

2 つの関数で使用できるため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 に答える