Question

我是一个非常努力学习jquery和javascript的蠢货。我认为这个代码有一个非常艰难的目标，需要帮助不好。我花了15个多小时试图解决这个问题，但仍然没有看到解决方案。

这是我的示例代码：

<div class="daddy">

  <div id="reset" onclick="changeAllFatsToSkinny">reset</div>

  <div class="skinny baby" onclick="weightChange(event)">Button01</div>
  <div class="fat baby" onclick="weightChange(event)">Button03</div>

  <div id="random" class="no class here">random text</div>

</div>

目标：点击事件“weightChange”将div类从默认的“瘦小宝贝”改为“胖宝宝”。我有以下代码工作......

function weightChange (event) {
var element = event.currentTarget;
element.className = (element.className == 'skinny baby') ? 'fat baby' : 'skinny baby';
}

此代码可能有点矫枉过正，但它现在正在运作。问题是我无法弄清楚如何通过点击“重置”div来找到并将所有“爸爸”的孩子中的“胖宝宝”替换回“瘦宝宝”。我让它有点工作，但它改变了所有div的类，包括“随机”div。

我查看了一堆jquery代码，并认为我需要将

串起来

.find()
.hasClass()
.removeClass()
.addClass() or maybe just toggleClass()

做这一切。我想我也需要某种“如果那时”的陈述。我的问题是我不知道足够的Javascript来获得正确的语法。我很糟糕，因为这个问题，我很伤心。拜托，请帮帮我！？非常感谢你。

P.S。老实说，我需要有人为我写出解决方案，因为我已经尝试过拼凑几个演示示例而没有得到预期的结果。我甚至不知道如何制作点击事件。我已经因为这个问题而沦为婴儿。遗憾。

Answer 1

以下是您要查找的代码：

$('#reset').click(function(){
    $('.daddy .baby').removeClass('fat').addClass('skinny');
});

您声称使用的是jQuery，但您根本没有在代码中使用它。

您可以按如下方式重写代码：

$('.baby').click(function(){
    $(this).toggleClass('fat skinny');
});

绝对不需要内联javascript。

这是小提琴：http://jsfiddle.net/MLHDh/

如何使用jquery更改多个div类？

1 个答案: