javascript - 多个元素的jQuery UI类切换

Question

我试图让 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";
    }
  });
});

Answer 1

@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"); });
    }
);

演示

我希望这就是你要找的，祝你好运！！

Answer 2

ToggleClass ( http://api.jquery.com/toggleClass/ ) 将添加和删除类。因此，您想删除“正常”类并添加“瘦”类：

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

关于动画，看起来您正在使用 jQueryUI 项目（对不起，我第一次错过了标签）：http: //jqueryui.com/toggleClass/，它允许您指定动画持续时间。考虑到这一点，您可以包括持续时间：

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

Answer 3

'normal'在您第一次到达您的代码块后，您没有删除该类，if您的代码块div将始终具有'normal' class，因此您的条件if将始终为真。

用于removeClass此目的。

此外，如果您想将classfrom更改'normal'为'thin'，请使用addClassfor addthin而不是toggle。

编辑：也许这就是你想要的：

$(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";
    }
  });
});