3

selected簡単なリストがあり、firs要素をクリックしてスタイルを削除する必要があります。誰かがいくつかの情報を提供できますか？

HTML：

<ul id="select-list">
    <li value="null">All</li>
    <li value="1" class="selected">1</li>
    <li value="2" class="selected">2</li>
</ul>

CSS：

#select-list li{
   border: 1px solid #ECECEC;
      /* margin-left: -15px; */
    overflow-x: auto;
    font-size: 10px;
    padding: 2px;
    margin-bottom: 5px;
    cursor: pointer;
}

.selected{
  border: 1px solid red !important;
}

jQuery：

jQuery('#select-list li').click(function(){
        console.log(jQuery(this).siblings());

        if(jQuery(this).val() == 'null')
            jQuery(this).siblings('li').removeClass('selected')
    });

http://jsfiddle.net/nonamez/pKGcD/

4

3 に答える 3

3

val()onでは使用できませんli。フィールドでのみ機能します。data-valueを使用して読み取ることができる属性を追加することをお勧めします.data('value')-または、より便利には、属性セレクターに使用することをお勧めします#select-list li[data-value="null"]。

そう：

<ul id="select-list">
    <li data-value="null">All</li>
    <li data-value="1" class="selected">1</li>
    <li data-value="2" class="selected">2</li>
</ul>

と：

jQuery('#select-list li[data-value="null"]').click(function(){
    jQuery(this).siblings('.selected').removeClass('selected')
});

実際の例: http://jsfiddle.net/7QcwY/

于 2013-01-14T12:40:21.097 に答える
2

これを試して：

$('#select-list li:first').parent().find('.selected').removeClass('selected');
于 2013-01-14T12:37:26.610 に答える
-1

「値」の属性は、それにアクセスする際の問題を引き起こし、それを値セットに変更しました。これは非常に単純です。

 $("#select-list>li").click(function () {
  if ($(this).attr('valueset') == "null") {
    $('.selected ').removeClass('selected ');
  }
});

編集:コメントに応えて、特定の順序で分離するためのいくつかのオプションを次に示します。

$('#select-list li.selected').removeClass('selected');

$(this).parent().find('.selected').removeClass('selected');

$('#select-list>li.selected').removeClass('selected');
//probably the best one selecting only direct decendant of the list that contain class- check performance to see if that fits

$('#select-list').find('li.selected').removeClass('selected');

$(this).siblings('.selected').removeClass('selected');
//only works if current one does not have this class that needs removed

$(this).siblings('.selected').andSelf().removeClass('selected');
//current one does have this class that also needs removed

 $('#select-list').children('li.selected').removeClass('selected');

ここで実際の動作を確認します: http://jsfiddle.net/XKz3N/5/

編集: jQuery バージョン 1.8 および 1.9+ に関連します。

jQuery バージョン 1.8 でaddBack()メソッドが作成され、バージョン 1.9andSelf()で削除されました。jQuery 1.8 以降の場合は、次を使用してください。

$(this).siblings('.selected').addBack().removeClass('selected');

このコードでは、効果は同じです。addBack()また、必要に応じて選択グループに追加される要素を削減するセレクターも実装しました。

于 2013-01-14T12:41:44.073 に答える