0

我有以下 HTML 标记：

<select name="Fault" class="textbox" id="fault">
<option>Single Light Out</option>
<option>Light Dim</option>
<option>Light On In Daytime</option>
<option>Erratic Operating Times</option>
<option>Flashing/Flickering</option>
<option>Causing Tv/Radio Interference</option>
<option>Obscured By Hedge/Tree Branches</option>
<option>Bracket Arm Needs Realigning</option>
<option>Shade/Cover Missing</option>
<option>Column In Poor Condition</option>
<option>Several Lights Out (please state how many)</option>
<option>Column Leaning</option>
<option>Door Missing/Wires Exposed</option>
<option>Column Knocked Down/Traffic Accident</option>
<option>Lantern Or Bracket Broken Off/Hanging On Wires</option>
<option>Shade/Cover Hanging Open</option>
</select>

<span id="faulttext" style="color:Red; display:none">Text in the span</span>


<select name="Fault" class="textbox" id="faultw">
<option>Single Light Out</option>
<option>Light Dim</option>
<option>Light On In Daytime</option>
<option>Erratic Operating Times</option>
<option>Flashing/Flickering</option>
<option>Causing Tv/Radio Interference</option>
<option>Obscured By Hedge/Tree Branches</option>
<option>Bracket Arm Needs Realigning</option>
<option>Shade/Cover Missing</option>
<option>Column In Poor Condition</option>
<option>Several Lights Out (please state how many)</option>
<option>Column Leaning</option>
<option>Door Missing/Wires Exposed</option>
<option>Column Knocked Down/Traffic Accident</option>
<option>Lantern Or Bracket Broken Off/Hanging On Wires</option>
<option>Shade/Cover Hanging Open</option>
</select>

<span id="faulttextw" style="color:Red; display:none">Text in the span</span>

和下面的jQuery脚本： -

$(document).ready(function(){

$('#fault option:nth-child(n+12)').wrapAll('<optgroup label="Urgent Faults">');

$('#faultw option:nth-child(n+12)').wrapAll('<optgroup label="Urgent Faults">');

$("#fault").change(function (event) {
    var $selected = $(this).find("option:selected");
    $("#faulttext").fadeToggle(!!$selected.closest("optgroup").length);
});

$("#faultw").change(function (event) {
    var $selected = $(this).find("option:selected");
    $("#faulttextw").fadeToggle(!!$selected.closest("optgroup").length);
});

});

请注意，有两个选择列表和两个跨度，第二个集合以 w 为后缀。

另请注意，上面的 jquery 是重复的，以处理带后缀的元素集。

我将如何修改/整理上面的 jquery 来处理这两者？

用作选择器#fault, #faultw option:nth-child(n+12)似乎不起作用。

同样在 jquery 的第二位，如果我要使用它来处理更改事件，$("#fault, #faultw").change那么我将需要fadeToggle匹配的 span 文本。

还是最好保持简单并保持原样？

4

4 回答 4

2

逗号的作用类似于 OR，因此启动了一个不相关的选择器 -option:nth-child(n+12)末尾的部分仅适用于逗号之后的选择器的其余部分，而不适用于它之前的选择器。您将需要使用：#fault option:nth-child(n+12), #faultw option:nth-child(n+12)。

至于change事件处理程序，您可以在元素上使用 HTML5data-*属性<select>来指定要使用的跨度的 ID。

HTML：

<select name="Fault" class="textbox" id="fault" data-spanid="faulttext">
    // options
</select>

<span id="faulttext" style="color:Red; display:none">Text in the span</span>


<select name="Fault" class="textbox" id="faultw" data-spanid="faulttextw">
    // options
</select>

<span id="faulttextw" style="color:Red; display:none">Text in the span</span>

jQuery：

$("#fault, #faultw").change(function (event) {
    var $selected = $(this).find("option:selected");
    $("#" + $(this).data('spanid')).fadeToggle(!!$selected.closest("optgroup").length);
});
于 2012-04-04T12:11:34.787 回答
1

使用选择器#fault option:nth-child(n+12), #faultw option:nth-child(n+12)

于 2012-04-04T12:08:24.270 回答
0

这是另一个解决方案

$(document).ready(function(){

$('#fault option:nth-child(n+12) , #faultw option:nth-child(n+12)').wrapAll('<optgroup label="Urgent Faults">');

$("#fault , #faultw").change(function (event) {
    var $selected = $(this).find("option:selected");
    var id  =   $(this).attr('id');

    $("#"+id).fadeToggle(!!$selected.closest("optgroup").length);
});

});

于 2012-04-04T12:16:44.137 回答
0

最不显眼的方法是让它取决于 DOM 中选择的实际位置。.nextAll('selector')寻找那个。

$("#fault, #faultw").change(function (event) {
    var $selected = $(this).find("option:selected");
    $(this).nextAll('#faulttext,#faulttextw').first().fadeToggle(!!$selected.closest("optgroup").length);
});
于 2012-04-04T12:19:56.897 回答