我有以下 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 文本。
还是最好保持简单并保持原样?