如何用jquery更改多個div類？

我是一個總noob努力學習jquery和javascript努力學習。我認爲我對這個代碼有一個非常難的目標，需要幫助不好。我花了15個小時試圖弄清楚，但仍然沒有看到解決方案。如何用jquery更改多個div類？

這裏是我的示例代碼：

<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在內的所有div的課程。

我已經看過了一堆的jQuery代碼，並認爲我需要串起來的

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

做這一切。我想我也需要某種「如果是」的說法。我的問題是，我不知道足夠的Javascript來獲得正確的語法。我吮吸，因爲這個問題我非常難過。請，請幫助我！？提前非常感謝你。

P.S.我真的需要有人爲我寫出解決方案，因爲我已經嘗試過將多個演示示例拼湊在一起，而沒有獲得理想的結果。我甚至不知道如何製作點擊事件。由於這個問題，我已經淪爲嬰兒。抱歉。

來源

2011-09-18 William Larsen

這裏就是你正在尋找代碼：

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

你們聲稱自己是使用jQuery，但是你是不是在你的代碼使用它。

可以按如下方式重寫代碼：

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

絕對沒有必要內嵌的JavaScript。

這裏的小提琴：http://jsfiddle.net/MLHDh/

來源

2011-09-18 23:08:35

/同意，採取「使用Javascript好的部分」（真的是一本小冊子），以及http://en.wikipedia.org/wiki/Unobtrusive_JavaScript的讀取。以這種方式使用JavaScript只會導致痛苦，痛苦和恨一個良好的語言。 – Louis

我不能告訴你我多麼感謝你的幫助！我正在消化你的榜樣並將其分解。我知道這很簡單，但我從來沒有發佈過問題板。謝謝你指出我的整個做法是不好的（約瑟夫和路易斯）。我需要知道，所以我現在可以停下來。謝謝！！ –

@Louis - 「Javascript好的部分」將在他的頭上方式。他顯然需要更接近「Javascript for Dummies」一書。 – maxedison

如何用jquery更改多個div類？

回答

相關問題