toggleClass（）對父母沒有工作，即使父被發現

嗨，我有以下HTML反覆在我的網頁（當然名字，並標識在每個實例的屬性的變化）：toggleClass（）對父母沒有工作，即使父被發現

<div class="funkyCheckBox"> 
<label for="uniqueName"> Whatever Text </label> 
<input type="checkbox" name="uniqueName" id="uniqueName" /> 
</div>

什麼這與一些CSS做的是讓一個大按鈕的外觀，輸入是隱藏的，我根據輸入的檢查值添加一個類到div。我用下面的JavaScript/jQuery的這個

$(".funkyCheckBox").live("click, tap", function(event){ 
    $(this).toggleClass("funkyCheckBoxActive"); 
    var nextCheckBox = $(this).find("input[type=checkbox]"); 
    nextCheckBox.prop("checked", !nextCheckBox.prop("checked")); 
});

現在，這一切都很好，很好，但測試過程中我注意到，如果你點擊標籤文本未應用類和輸入的值不切換......因此，我增加了以下...

$(".funkyCheckBox label").live("click, tap", function(event){     
    $(this).parent("div").toggleClass("funkyCheckBoxActive"); 
    var nextCheckBox = $(this).next("input[type=checkbox]"); 
    nextCheckBox.prop("checked", !nextCheckBox.prop("checked")); 
});

現在，這是偉大的點擊標籤文本現在改變輸入但是父DIV沒有采取/撥動「funkyCheckBoxActive」級的數值。我不確定爲什麼當我在回調函數中使用console.log($(this).parent("div"))時，我正在輸出thom對象的屬性。有誰知道爲什麼我的toggleClass沒有被應用？

來源

2012-10-23 Mike Sav

你能不能把它回到它是怎麼和添加無標記>單擊用'$（本）.parent（「格」）塊點擊（）。「裏面？ –

如果我嘗試複選框沒有響應？ –

是什麼讓你覺得班級沒有被改變？它可能是。如果問題是你沒有看到可視化的CSS變化，那很可能是CSS特殊性問題。在'toggleClass'之後嘗試'console.log（$（this）.closest（'。funkyCheckBoxActive'）。length）' – charlietfl

-2

請使用「on」方法而不是「live」，因爲它已被棄用。 LABEL標籤中的「for」屬性也指向一個現有的ID。

這裏是糾正和工作代碼：

<div class="funkyCheckBox"> 
    <label for="uniqueName"> Whatever Text </label> 
    <input type="checkbox" name="uniqueName" id="uniqueName" /> 
</div>

和

$(".funkyCheckBox label").click(function(event){ 
    $(this).parent("div").toggleClass("funkyCheckBoxActive"); 

    var nextCheckBox = $(this).next("input[type=checkbox]"); 
    var nextCheckBoxValue = nextCheckBox.val(); 

    nextCheckBox.val(! nextCheckBoxValue); 
});

編輯：這裏是的jsfiddle鏈接

http://jsfiddle.net/RUYWT/

EDIT2： @Mike Sav的：我已經修改了你的代碼，它與所有可能的情況下，現在的工作： http://jsfiddle.net/RUYWT/11/

來源

2012-10-23 10:15:28 nicmon

1.調用人們的傻瓜並不會讓你遠離社區。 2.你的代碼不起作用，添加類，你會發現它沒有被應用時，點擊複選框，http://jsfiddle.net/RUYWT/1/ –

使用FireBug，你會看到DIV上的切換類（希望）編輯：我更新了jsFiddle，以防你不知道Firebug是什麼：http://jsfiddle.net/RUYWT/3/ – nicmon

我的上帝！我開始了什麼！ –

根據jQuery的版本，您的代碼將工作或沒有。請注意，當您單擊引用該標籤的標籤時，瀏覽器已經切換複選框;所以你只需要做到這一點：

$('#uniqueName').change(function() { 
    $(this).parents("div").toggleClass("funkyCheckBoxActive"); 
});

來源

2014-07-15 05:37:17

toggleClass（）對父母沒有工作，即使父被發現

回答

相關問題