Question

我的jQuery代码似乎不起作用。也许一双新鲜的眼睛可以为我看一看。我没有试图删除以前的类名＆＃34;选择＆＃34;一旦点击了新的LI项目。但是，在下面的图片中，它似乎无法正常工作：

以下是有问题的jQuery代码：

<script type="text/javascript">

$(document).ready(function() {

    $(".field_arrow").click(function() {

        $(".field_list").css("display", "block");

    });

    $(".field_list li").click(function(e) {

        var select = $(this).closest('.field_list')

        select.find("ul li").removeClass('selected');

        $(this).addClass('selected');

    });

}); 
</script>

以下是HTML标记：

<!DOCTYPE html>
<html>
<head>

<script src="jquery.min.js" type="text/javascript"></script>

<style type="text/css">
* {
    font-size: 9pt;
    font-family: Segoe UI;
}
.field_container {
    border: 1px solid rgb(170,170,170);
    width: 177px;
}
.field_wrapper {
    float: left;
}
.field_arrow {
    background:url(arrow.png) no-repeat scroll right center;
    width:20px;
    margin-top: 1px;
}
.field_arrow:hover {
    cursor: pointer;
}
.field {
    border: 0;
    width: 150px;
    padding: 2px;
}
.field_list {
    list-style:none;
    margin: 0;
    display: none;
    border-top: 1px solid rgb(170,170,170);
    margin-top: 5px;
    padding: 1px;
}
.field_list li {
    cursor: pointer;
    padding: 2px;
}
.field_list li:hover {
    background: red;
}
.selected {
    background: blue;
    color: #FFF
}
</style>

<script type="text/javascript">

$(document).ready(function() {

    $(".field_arrow").click(function() {

        $(".field_list").css("display", "block");

    });

    $(".field_list li").click(function(e) {

        var select = $(this).closest('.field_list')

        select.find("ul li").removeClass('selected');

        $(this).addClass('selected');

    });

}); 
</script>

<div class="field_container">

    <div class="field_wrapper"><input type="text" class="field"></div>

    <div class="field_arrow"></div>

    <ul class="field_list">
        <li>Apples</li>
        <li>Oranges</li>
        <li>Bananas</li>
    </ul>


<div>

</body>
</html>

Answer 1

field_list是ul，因此当您在其中找到ul时，您不需要li选择器。试试这个：

select.find("li").removeClass('selected');

如果您一次只选择了一个li，那么您可以找到当前拥有该类的单个，而不是尝试从每个li删除该类，只有一个会有它一次：

select.find(".selected").removeClass('selected');

Answer 2

您可以使用siblings()执行此操作，因为您尝试从selected的其余部分删除类li并将其应用于当前版本。

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

以下是一个例子： http://jsfiddle.net/mj1u0qa2/

无法从UL LI列表中删除所选类

2 个答案: