jQuery：使用.find動態選擇元素（）

我正在處理一個包含很多節的窗體。每個部分都有一個單選按鈕，用於指示用戶想要使用的單位（lbs/oz vs kg等）。當他們點擊一個單元時，我想隱藏（）所有輸入在同一部分，然後顯示（）相關的。jQuery：使用.find動態選擇元素（）

我不能得到它的工作。我認爲我以某種方式誤解了find（）函數，因爲它沒有選擇任何元素。

var show_hide_units = function (selectedUnitElement) { 
    $element = $(selectedUnitElement); 
    unit_class = $element.attr("class"); 
    $section = $($element.parents('.measurement')); 
    $inputs = $($section.find('.inputs *')); 
    $inputs.hide(); 
    $inputs.find('.' + unit_class).show(); 
};

這裏是一個小提琴示出更多的上下文：http://jsfiddle.net/32Q9t/

任何指針將不勝感激。

來源

2013-03-29 burgerB

也許你想用'filter'，而不是'find'？在孩子們中間搜尋。 –

@JanDvorak：謝謝，但不是 - 我想要顯示的元素是$ inputs元素 – burgerB

的後代，然後您試圖顯示隱藏節點的後代。無論如何，隱藏節點的孩子都會隱藏起來。 –

如果選擇隱藏所有'.inputs *'元素（這不是簡單的解決方案在所有），那麼你必須表現出更多的輸入，你這樣做，爲元素「看得見」的隱藏是不是真的可見：

$inputs.parent().find('.' + unit_class+', .' + unit_class+' *').show();

Demonstration

一個簡單的解決方案竟被d是隱藏/顯示只有一個級別的元素：

$('.inputs > *').hide(); 
$('.inputs > .'+unit_class).show();

Demonstration

來源

2013-03-29 20:59:21

你知道如何使用JavaScript調試器嗎？這是你的問題的真正答案。以下是開始的方法：在您的小提琴中，在show_hide_units()函數的開頭插入debugger;語句，如在updated fiddle中。我還對代碼進行了一些小的更改，添加了缺少的var聲明，並刪除了兩行中的冗餘包裝文件$()。（從.parents()或.find()返回的值已經是jQuery對象了。）

我沒有做的是修復這個bug。現在，我們來看看如何開始：在Chrome中加載該頁面並打開開發工具。然後點擊其中一個單選按鈕，它將在該語句中停止。從那裏你可以通過懸停在它們上面來檢查變量，單步執行代碼，並做各種有用的事情。在那裏徘徊一段時間，你會發現錯誤，或者如果不是，在調試器中發現你已經發現的東西並且我們可以更多地發現它。

來源

2013-03-29 20:55:14

感謝您的提示！我知道這個工具，但不知道如何在該函數中插入該行。 – burgerB

http://api.jquery.com/find/：

.find（選擇器）說明：獲取每個元素的後代在當前匹配的元素，通過一個選擇器，jQuery的對象或元件過濾。

所以只需使用$('.youClass')來匹配目標元素。

var show_hide_units = function (selectedUnitElement) { 
    var targetClass = $(selectedUnitElement).attr('class'); 
    $('.inputs > *').hide(); 
    $('.' + targetClass).show(); 
};

有你與你的分叉提琴：http://jsfiddle.net/BE8ZV/

來源

2013-03-29 20:56:53 blint

+1因爲我現在看到你基本上提出了我在我之前提出的建議。 –

不幸的是，這個班被太多的其他領域用於這樣做，但真正的問題是我顯示隱藏的父母節點 – burgerB

jQuery：使用.find動態選擇元素（）

回答

相關問題