1

クラスが「通常」の場合にのみ、divのクラスを「通常」から「薄い」に変更しようとしています。しかし、どういうわけか、それらは前後に変化するだけで、IFステートメントは完全に間違って書かれているようです:)

ここにコードがあります

<div class="normal">1</div>
<div class="normal">2</div>
<div class="normal">3</div>
<div class="normal">4</div>
<div class="normal">5</div>
<div class="normal">6</div>

CSS:

.normal{
float:left;
height:200px;
width:100px;
border:1px dotted gray;
}

.thin{
float:left;
width:50px;
height:200px;
border:1px dotted gray;
background-color:#5a5a5a;
}

jQuery

$(document.body).click(function () {
  $("div").each(function () {
    if ($(this).hasClass("normal")) {
      $(this).toggleClass("thin", 300);         //Problem here?
    } else {
      this.style.color = "red";
    }
  });
});
4

3 に答える 3

2

@Egis 要件に応じて、コードは次のようになります。

$(document.body).toggle(
    function () {
        $("div.normal").animate({
            width: "50px",
        }, "slow", function(){ $(this).addClass("thin"); });
    },
    function(){
        $("div.normal").animate({
            width: "100px",
        }, "slow", function(){ $(this).removeClass("thin"); });
    }
);

デモ

これがあなたが探しているものであることを願っています、頑張ってください!!

于 2012-10-10T18:39:55.033 に答える
1

ToggleClass（http://api.jquery.com/toggleClass/）は、クラスの追加と削除の両方を行います。したがって、代わりに、クラス「normal」を削除して、クラス「thin」を追加します。

$(this).removeClass("normal").addClass("thin");

アニメーションに関しては、jQueryUIプロジェクトを使用しているようです（初めてタグを見逃してしまいました）：http：//jqueryui.com/toggleClass/これにより、アニメーションの期間を指定できます。それを念頭に置いて、期間を含めることができます。

$(this).removeClass("normal", 300).addClass("thin", 300);
于 2012-10-10T18:03:37.217 に答える
0

'normal'あなたのコードブロックに最初に到達した後にクラスを削除しなかったので、ifあなたの条件divは常に真になります。'normal' classif

removeClassその目的で使用します。

また、 をclassから'normal'に変更する場合は、 の代わりに を'thin'使用しaddClassて追加します。thintoggle

編集:多分これはあなたが望むものです:

$(document.body).click(function () {
  $("div").each(function () {
    if ($(this).hasClass("normal")) {
      $(this).removeClass("normal");
      $(this).addClass("thin");
    }
    else if ($(this).hasClass("thin")) {
      $(this).removeClass("thin");
      $(this).addClass("normal");
    } else {
      this.style.color = "red";
    }
  });
});
于 2012-10-10T18:13:40.573 に答える