gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 21:24:53 25 4
gpt4 key购买 nike

我的 jQuery 代码似乎无法正常工作。也许有一双新鲜的眼睛可以帮我看看。单击新的 LI 元素后,我无法尝试删除先前的类名“已选择”。但是,在下图中,它似乎不起作用:

enter image description here

这里是有问题的 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_listul 因此在查找 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com