Question

我的html表单包含可选项，如下所示：

<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 select元素用于选择Command1，Command2或Command3，它们对应于上述html元素的类。

当选择更改事件发生时，它会调用以下函数：

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

但是对于上面的elem1和elem2的类中包含的Command1，只会显示第一个输入元素，但我认为jQuery选择器会同时应用这两个。

换句话说，对于上面的html，showOptional（'Command1'）Javascript函数只显示Command1的第一个span，而不显示Command1的第二个span。为什么不两个？

Answer 1

这对我有用：

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();
}

为什么jQuery选择器只应用于第一项？

1 个答案: