Bubbling-Ereignisse gelernt, den Code eingegeben und anhand von Online-Artikeln kleine Detailänderungen vorgenommen. Ich habe eine Frage:
1. Das ultimative Ziel besteht darin, die Farbe zu ändern, wenn die Maus nach oben bewegt wird.
2. Wie kann das Problem gelöst werden, dass beim Klicken auf das nächste li-Element die Farbe des zuvor angeklickten Elements wiederhergestellt wird?
Bitte teilen Sie mir Ihre Ideen und die Methoden mit, die Sie verwenden werden. Ich möchte meine Programmierkenntnisse üben.
PS: Es ist einfach, ein Buch zu lesen, aber es ist verwirrend, selbst Code zu schreiben, hey!
HTML-Code lautet wie folgt:
<ul id="color">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
JS-Code:
(function () {
var color_list = document.getElementById('color');
color_list.addEventListener('click',changeColor);
function changeColor(e) {
var x = e.target;
if(x.nodeName.toLowerCase() === 'li')
x.style.backgroundColor = 'red';
// 最终目的要实现鼠标移动上去就变色?
// 另外,如何解决点击下一个li元素,上一个点击的元素颜色还原?
}
})();
1,能用CSS解决就不用JS,题目的思路用:hover伪类可以解决这个问题。
2,但是你的代码是click事件..有点没对上,好吧,既然都写了事件代理,我写一个low点的,在li不多的情况下直接操作li
闭包知道吧?为了不污染全局变量使用闭包,第一种写法是直接清除全部li的颜色,给当前点击的li加上颜色。
第二种写法我直接写里面了,外面的雷同的元素获取和闭包的代码我就不重复写了
第二种是清除上一个,给当前的li添加颜色,相比较而言第二种的性能稍微好点,第一种方法理解起来简单一点。
ps:不过我还是推荐事件代理的写法。
Why not css~
可以利用mouseenter、mouseout事件
鼠标移上去就变色主要还是用css,伪类:hover就搞定了。
点击的话提供两个思路,1.把ul下的所有li都恢复变色,e.target再变成red。
2.点击后保存上一个target,点击后上一个target恢复变色,目前的target变成red
鼠标移上去实现变色,为啥不用hover事件,你去搜一下hover。
所有移上去xx、移下来yy的,首先考虑用css的hover伪类;
你把你默认的属性存到一个类名里,改变后的属性存到另一个类名里,click回调时,
$(this)
去掉默认类添加改变类,然后遍历它的兄弟元素,去找改变类,找到以后去掉改变类添加默认类,应该就可以了吧~hover(function(){
},function(){
})