jquery/jsの新機能です。 私は、選択したオプションに関してどのリストアイテムを表示するかを制御しようとしています。 スクリプトの最初の条件は好きなように機能しますが、2番目の条件は機能しません。 :nth-of-type(2):選択したものが動作しない理由がわかりません:どのオプションが選択されているかチェックし、選択されたオプションに関して表示されるリスト項目を制御します。
また、私は本のjqueryを本当に知らないので、これが正しいアプローチであるかどうかは分かりません。
ご質問やご提案は大歓迎です!
ありがとうございました。
var $monthlyOption = '#monthly option';
var $list = '.top-list ul li';
$(document).ready(function() {
if ($($monthlyOption).is(':nth-of-type(1):selected')) {
$($list).slice(0, 5).removeClass('hide-me')
} else if ($($monthlyOption).is(':nth-of-type(2):selected')) {
$($list).slice(5, 10).removeClass('hide-me')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<select id="monthly">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="top-list">
<ul>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
<li class="hide-me">list item</li>
</ul>
</div>
.......これを試してみてください! ありがとうございました! – Dixiekun
@Dixiekun私は助けてくれてうれしいです。 –