老师请检查
来源：4-10 自由编程
慕标5156652
2020-08-09 19:04:53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body>
<button type="button">添加</button>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<script src="https://cdn.bootcss.com/zepto/1.1.7/zepto.min.js"></script>
<script>
$(document).ready(function(){
$("button").one("click",function(){
var add=$("<li>55</li>");
$("ul").append(add);
});
// $("button").click(function(){
// var add=$("<li>55</li>");
// $("ul").append(add);
// })
$("ul").on("mouseover","li",function(){
$("li").removeClass("red");
$(this).addClass("red");
})
});
</script>
</body>
</html>
1回答
-
同学你好，代码中的问题如下：
1、实现效果与要求不符。如下是同学实现的效果，离开最后的li的背景颜色还是红色，没有去掉。因为同学设置的是移入下一个的时候，取消掉。
而这里的效果应该是移入当前的时候，变红，移出当前元素的时候，去掉红色背景。建议：可以添加个移出事件哦，在移出的时候，去掉红色的类，例：
2、使用one绑定事件，只可以触发一次，而这里我们可能会添加多个，建议：可以使用on绑定事件，例：
3、目前这一添加，之后每次添加的内容都是“55”，但是我们添加第六个的时候希望是“66”，以此添加，会是“77”，“88”这样。
建议：可以在点击的时候，获取当前的li长度，假如现在有4个，或者的长度就是4，但是现在要添加的是第5个，可以使长度加1，然后乘以11，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
