javascript - Bringen Sie mir bitte den nativen JS-Code bei, um die Farbe des Elements zu ändern, wenn Sie mit der Maus darauf fahren, und sie wiederherzustellen, wenn Sie es wegbewegen.
世界只因有你
世界只因有你 2017-05-19 10:30:58
0
7
907

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元素,上一个点击的元素颜色还原?
        }
    })();
世界只因有你
世界只因有你

Antworte allen(7)
滿天的星座

1,能用CSS解决就不用JS,题目的思路用:hover伪类可以解决这个问题。
2,但是你的代码是click事件..有点没对上,好吧,既然都写了事件代理,我写一个low点的,在li不多的情况下直接操作li

        (function(){
            var color_list = document.getElementById('color');
              var lis = color_list.getElementsByTagName("li");

            for(var i = 0;i<lis.length;i++){
                lis[i].onclick = function(){
                    for(var i = 0;i<lis.length;i++){
                        lis[i].style.color = "";
                    }
                    this.style.color = "red";
                }
            }
        })(); 

闭包知道吧?为了不污染全局变量使用闭包,第一种写法是直接清除全部li的颜色,给当前点击的li加上颜色。

第二种写法我直接写里面了,外面的雷同的元素获取和闭包的代码我就不重复写了

            var last = 0;
            for(var i = 0;i<lis.length;i++){
                lis[i].index = i;
                lis[i].onclick = function(){
                    lis[last].style.color = "";
                    lis[this.index].style.color = "red";
                    last = this.index;
                }
            }

第二种是清除上一个,给当前的li添加颜色,相比较而言第二种的性能稍微好点,第一种方法理解起来简单一点。

ps:不过我还是推荐事件代理的写法。

淡淡烟草味
  1. Why not css~

  2. 可以利用mouseenter、mouseout事件

某草草

鼠标移上去就变色主要还是用css,伪类:hover就搞定了。
点击的话提供两个思路,1.把ul下的所有li都恢复变色,e.target再变成red。
2.点击后保存上一个target,点击后上一个target恢复变色,目前的target变成red

習慣沉默

鼠标移上去实现变色,为啥不用hover事件,你去搜一下hover。

淡淡烟草味
  1. 所有移上去xx、移下来yy的,首先考虑用css的hover伪类;

  2. 你把你默认的属性存到一个类名里,改变后的属性存到另一个类名里,click回调时,$(this)去掉默认类添加改变类,然后遍历它的兄弟元素,去找改变类,找到以后去掉改变类添加默认类,应该就可以了吧~

PHPzhong
<style>
    #color > li:hover {
      color: red;
    }
</style>
    (function () {
      var color_list = document.getElementById('color');
      color_list.addEventListener('click', changeColor);

      function changeColor(e) {
        var x = e.target,
          liarr = e.target.parentElement.children,
          i, l = liarr.length;
        if (x.nodeName.toLowerCase() === 'li') {
          // 解决点击下一个li元素,上一个点击的元素颜色还原。
          for (i = 0; i < l; i++) {
            liarr[i].style.backgroundColor = null;
          };
          x.style.backgroundColor = 'red';
        }
      }
    })();
仅有的幸福

hover(function(){

这里执行鼠标移入
用.eq($(this).index()) //找到你鼠标移入的那一个li

},function(){

这里执行移出的
直接一行代码把所有li的颜色初始化

})

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!