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

});

2 つの選択リストと 2 つのスパンがあることに注意してください。2 番目のセットには末尾に w が付いています。

また、上記の jquery は、接尾辞付きの要素セットを処理するために複製されていることに注意してください。

上記のjqueryを変更/片付けて両方に対処するにはどうすればよいですか?

セレクターとして使用#fault, #faultw option:nth-child(n+12)しても機能しないようです。

また、jquery の 2 番目のビットで、使用して変更イベントを処理する場合、一致するスパン テキスト$("#fault, #faultw").changeが必要になります。fadeToggle

それとも、シンプルにしてそのままにしておくのが最善ですか？

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 に答える