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

<强> DEMO

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

Answer 2

ToggleClass（http://api.jquery.com/toggleClass/）将添加和删除该类。因此，您要删除“普通”类并添加“thin”类：

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

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

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

Answer 3

在您第一次到达'normal'的代码块后，您没有删除if课程，而div将始终拥有'normal' {{1} }，所以你class中的条件永远都是真的。

为此目的使用if。

此外，如果您要将removeClass从class更改为'normal'，请使用'thin'添加addClass代替thin

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

toggle

jQuery UI类切换多个元素

3 个答案: