3

我有一个简单的列表，我需要selected通过单击第一个元素来删除样式。有人可以提供一些信息吗？

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()在 an 上使用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

“value”的属性会导致访问它的问题，将其更改为 valueset 并且非常简单。

 $("#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.9 版中andSelf()被删除。对于 jQuery 1.8 及更高版本，请使用：

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

在这段代码中，效果是一样的。addBack()还实现了一个选择器，以在需要时减少添加回选择组的元素。

于 2013-01-14T12:41:44.073 回答