为什么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选择器仅适用于第一项？

回答

相关问题