我的 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 因此在查找 li 时不需要 ul 选择器它。试试这个:
select.find("li").removeClass('selected');
如果您一次只选择一个 li，您可以只找到当前具有此类的单个 li，而不是尝试从每个 li 中删除该类> 当一次只有一个人拥有它时:
select.find(".selected").removeClass('selected');
关于javascript - 无法从 UL LI 列表中删除所选类别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33764016/