我的 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');
我是一名优秀的程序员,十分优秀!