javascript - Sila ajar saya kod asli JS untuk menukar warna elemen apabila anda menggerakkan tetikus kepadanya, dan memulihkannya apabila anda mengalihkannya.

Question

Belajar peristiwa menggelegak, menaip kod dan membuat perubahan butiran kecil berdasarkan artikel dalam talian. Saya ada soalan:

1. Matlamat utama adalah untuk menukar warna apabila tetikus bergerak ke atas.
2 Bagaimana untuk menyelesaikan masalah apabila elemen li seterusnya diklik, warna elemen yang diklik sebelum ini dipulihkan?
Sila beritahu saya idea anda dan kaedah yang akan anda gunakan, saya akan menulis sendiri.
PS: Membaca buku memang mudah, tetapi mengelirukan untuk menulis kod sendiri, hei!

Kod HTML adalah seperti berikut:

<ul id="color">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Kod JS:

 (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元素，上一个点击的元素颜色还原？
        }
    })();

Answer 1

1 Jika anda boleh menggunakan CSS untuk menyelesaikannya, anda tidak memerlukan JS Idea soalannya ialah: hover pseudo-class boleh menyelesaikan masalah ini.
2, tetapi kod anda adalah acara klik.. Ia agak salah, kerana saya telah menulis proksi acara, saya akan menulis yang lebih rendah dan terus mengendalikan li apabila tidak banyak 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";
                }
            }
        })(); 

Adakah anda tahu penutupan? Untuk tidak mencemarkan pembolehubah global dan menggunakan penutupan, cara pertama untuk menulisnya ialah mengosongkan terus warna semua li dan menambah warna pada li yang sedang diklik.

Cara penulisan kedua ditulis terus di dalam saya tidak akan menulis kod yang sama untuk pemerolehan dan penutupan elemen lagi

.

            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;
                }
            }

Kaedah kedua ialah mengosongkan yang sebelumnya dan menambah warna pada li semasa Sebagai perbandingan, prestasi kaedah kedua lebih baik sedikit, dan kaedah pertama lebih mudah difahami.

ps: Walau bagaimanapun, saya masih mengesyorkan kaedah penulisan proksi acara.

Answer 2

1. Kenapa tidak css~

2. Anda boleh menggunakan acara mouseenter dan mouseout

Answer 3

Warna berubah apabila tetikus dialihkan ke atas, terutamanya menggunakan css, kelas pseudo:hover boleh dilakukan.
Jika diklik, terdapat dua idea 1. Pulihkan warna semua li di bawah ul, dan tukar e.target kepada merah.
2 Klik untuk menyimpan sasaran sebelumnya, klik untuk memulihkan warna sasaran sebelumnya, dan sasaran semasa menjadi merah

.

Answer 4

Gerakkan tetikus ke atas untuk menukar warna Mengapa tidak menggunakan acara tuding?

Answer 5

1. Untuk semua mereka yang naik ke xx dan ke bawah ke yy, mula-mula pertimbangkan untuk menggunakan kelas pseudo hover CSS

;

2. Anda menyimpan atribut lalai anda dalam nama kelas dan menyimpan atribut yang diubah dalam nama kelas lain Semasa panggilan balik klik, $(this)alih keluar kelas lalai, tambah kelas yang diubah, dan kemudian lintas. Untuk elemen adik-beradiknya, cari kelas perubahan Setelah anda menjumpainya, alih keluar kelas perubahan dan tambahkan kelas lalai~

   #🎜#.

Answer 6

<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';
        }
      }
    })();

Answer 7

tuding(fungsi(){

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

},fungsi(){

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

})