我的jQuery代码似乎无法正常工作。也许新鲜的眼睛可以帮我看看。单击新的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>
最佳答案
field_list是ul，因此在其中找到ul时不需要li选择器。尝试这个：
select.find("li").removeClass('selected');
如果一次只选择一个
li，则可以找到当前具有此类的单个类，而不是尝试一次只有一个li从每个中删除该类：select.find(".selected").removeClass('selected');
关于javascript - 无法从UL LI列表中删除选定的类别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33764016/