爲什麼jQuery選擇器僅適用於第一項？

我的HTML形式具有可選的條款顯示如下：爲什麼jQuery選擇器僅適用於第一項？

<span class="Optional Command1 Command2"> 
    <label for="elem1">Elem 1:</label><input type="text" id="elem1" /><br /> 
</span> 
<span class="Optional Command1 Command3"> 
    <label for="elem2">Elem 2:</label><input type="text" id="elem2" /><br /> 
</span>

一個HTML選擇元件用於選擇COMMAND1，命令2或指令代碼對應於類用於上述HTML元素。

當選擇改變事件發生時，它調用下面的函數：

function showOptional(commandName) { 
    $('.Optional').hide(); // clear out optional inputs 
    $('.Optional').filter('.' + commandName).show(); // show relvant inputs 
}

然而，對於COMMAND1，其被包括在類兩個elem1和elem2時以上，只有第一輸入元件將被顯示，但我認爲jQuery選擇器將同時適用。

換句話說，對於上面的html，showOptional（'Command1'）Javascript函數只顯示Command1的第一個跨度，而不顯示Command1的第二個跨度。爲什麼不兼得？

來源

2012-03-11 J Harri

您的代碼應該顯示兩者。如果不是，還有其他一些問題。 – 2012-03-11 00:31:37

我沒有看到任何會阻止工作的東西，實際上它適用於我：http://jsfiddle.net/qH2KF/。是否有其他代碼可以刪除類？ – nnnnnn 2012-03-11 00:31:59

它們被函數中的'.hide（）'隱藏。請注意，如果您更改小提琴中的代碼以將「Command2」或「Command3」傳遞給該函數，則只會顯示其中一個跨度，並且如果您傳遞了其他字符串，則不會顯示任何內容，因此您已顯示的代碼作品和問題必須在別處。如果你想在開始隱藏時看到它工作：http://jsfiddle.net/qH2KF/3/ – nnnnnn 2012-03-11 00:38:38

這個工作對我來說：

function showOptional(commandName) { 
    $('.Optional').hide(); // clear out optional inputsinputs 
    $('.Optional.' + commandName).show(); // show relvant 
} 

showOptional('Command1');

小提琴：http://jsfiddle.net/sYXuM/1/

但是，原來的方法也適用於我還有：http://jsfiddle.net/sYXuM/2/

我只是跑了performance test下面的代碼比你原來的方法和我的建議更快如上所述：

function showOptional(commandName) { 
    $('.Optional').hide().filter('.' + commandName).show(); 
}

來源

2012-03-11 00:33:45

你是對的，它確實有效。我一定是有幻覺... – 2012-03-11 00:37:31

另外，我喜歡你如何連接兩個類。我最初嘗試過，但是我儘管空間應該在兩個類之間，所以它對我來說不起作用（自從我上次使用JS和jQuery以來已經很長時間了，估計我忘了很多）！ – 2012-03-11 00:40:00

@JHarri我剛剛進行了性能測試，更新了我的答案...... – 2012-03-11 00:44:03

爲什麼jQuery選擇器僅適用於第一項？

回答

相關問題