2017-08-09 31 views
-2

我希望能夠遍歷幾個不同的標籤並根據單選按鈕是否被選中來隱藏它們的內容。這是我想出的解決方案,但我一直在控制檯中發生錯誤。。從循環執行時,隱藏()不是函數錯誤

var hazardOptions = $(".js-hazardous-option"); 
var hazard = $("input[name=Hazardous]"); 
for (var i = 0, len = hazard.length; i < len; i++) { 
    if (hazard[i].id === "HazardousYes" && hazard[i].checked) { 
     for (var ii = 0, length = hazardOptions.length; ii < length; ii++) { 
      hazardOptions[ii].show(); 
     } 
    } else if (hazard[i].id === "HazardousNo" && hazard[i].checked) { 
     for (var iii = 0, leng = hazardOptions.length; iii < leng; iii++) { 
      hazardOptions[iii].hide(); 
     } 
    } 
} 

我得到的錯誤是:

隱藏()不是一個函數

不知道我很想念,我試過在看看網上的類似的問題,但沒有運氣。我很確定問題出在這裏:hazardOptions[iii].hide();但是不確定爲什麼和/或如何解決它。

+2

您可以發佈你的HTML?沒有它,很難知道什麼是錯的。 – Nisarg

+2

IIRC通過索引訪問數組對象可以爲您提供DOM元素,而不是JQuery對象。你需要做'$(hazardOptions [iii])。hide();'讓它工作 – musefan

+1

hide()/ show()是JQuery函數。你正試圖將它們應用到Javascript變量。 – yanman1234

回答

3

把它包起來當你有對象的列表從一個jQuery選擇,如果你試圖通過索引來訪問他們,你實際上得到的DOM元素後面,而不是JQuery對象。這很令人困惑,但是it is in the documentation

什麼您有效地需要做的就是把它放回一個jQuery對象:

$(hazardOptions[iii]).hide(); 

或者你可以使用eq() function確實提供jQuery對象的廣告因此仍然有hide()功能:

hazardOptions.eq(iii).hide(); 
+1

爲什麼不使用jQuery的內置'.each()'?你在包裝DOM元素,解包和重新包裝。只要保持它們的包裝並對它們進行迭代 – mhodges

+0

@mhodges:第二個想法是,[documentation](https://api.jquery.com/each/)表明它需要同樣的東西... – musefan

+0

是的,出於某種原因,我正在考慮'.each()'保留了DOM元素的包裝副本。恕我直言,我討厭jQuery如何做他們的迭代器函數大聲笑。無論哪種方式,代碼可以顯着簡化 - 請參閱我發佈的解決方案。 – mhodges

0

最有可能你需要$

$(hazardOptions[ii]).hide() 
0

正如您目前擁有它,如果hazard.id === "HazardousYes",您顯示所有危害選項,並且如果它是"HazardousNo"您隱藏所有這些選項。

您可以在jQuery集合上調用.show().hide(),它將應用集合中的所有元素。以下代碼將複製原始代碼的邏輯,但是,危險選項最終顯示/隱藏狀態將僅由最後檢查的危險確定,並且其ID等於「危險」和「危險否」。這可能是你想要的,但我會想象它不是。

var hazardOptions = $(".js-hazardous-option"); 
 
var hazards = $("input[name=Hazardous]"); 
 
hazards.each(function (index, hazard) { 
 
    if (hazard.checked) { 
 
    if (hazard.id === "HazardousYes") { 
 
     hazardOptions.show(); 
 
    } else if (hazard.id === "HazardousNo") { 
 
     hazardOptions.hide(); 
 
    } 
 
    } 
 
}

編輯 - 試想想它,如果你沒有與重複的ID元素,可以使這個非常簡單:

hazardOptions.show($("#HazardousYes").is(":checked")); 
hazardOptions.hide($("#HazardousNo").is(":checked"));