使用输入颜色单击时更改颜色

Question

我想单击它以更改颜色标题。 我写下一页：

window.onload = function() { 
 
    var color = document.getElementById('input-color'); 
 
    var elems = document.querySelectorAll('.title'); 
 
    function chancheColor(){ 
 
     for (var i = 0; i < elems.length; i++) { 
 
      elems[i].addEventListener('click', function() { 
 
       color.click(); 
 

 
       color.addEventListener('change', function() { 
 
        var name = this.value; 
 

 
        for (var i = 0; i < elems.length; i++) { 
 
         elems[i].style.color = name; 
 
        } 
 
       }); 
 

 
      }); 
 
     } 
 
    } 
 
    chancheColor(); 
 
};

<input id="input-color" type="color"> 
 
<p class="title">First</p> 
 
<p class="title">First</p> 
 
<p class="title">First</p>

我模拟点击 color.click（）; 这是真的吗？

现在我的功能сhange颜色为所有冠军 东阳我有第二个周期（VAR I = 0;我< elems.length;我++） 我不知道，怎么拿到冠军的当前值被点击。

一般来说，如果它是如此造成的，如何在函数中传递一个参数？ color.addEventListener（'change'，function（）{}）;

Answer 1

您正在附加事件处理函数以在for循环中多次着色，不需要这样做。并且循环内部的事件处理程序不是必需的，您只需更改点击'p'的颜色，以便您可以保存点击的p并在输入颜色的change事件处理程序中更改颜色，如下所示：

window.onload = function() { 
 
    var color = document.getElementById('input-color'); 
 
    var elems = document.querySelectorAll('.title'); 
 
    var currentElem; 
 
    function chancheColor(){ 
 
     for (var i = 0; i < elems.length; i++) { 
 
      elems[i].addEventListener('click', function() { 
 
       currentElem = this; 
 
       color.click(); 
 
      }); 
 
     } 
 
    } 
 

 
    color.addEventListener('change', function() { 
 
       var name = this.value; 
 
       currentElem.style.color = name; 
 
      }); 
 
    chancheColor(); 
 
};

<input id="input-color" type="color"> 
 
<p class="title">First</p> 
 
<p class="title">First</p> 
 
<p class="title">First</p>

Answer 2

在每个click在elems[i]要附加一个额外的change事件处理程序color。

移动change事件附件在for循环之外。

如果是这样造成的，一般如何在功能 中传输参数？

您可以使用Element.dataset设置点击的元素.dataset属性true并设置兄弟姐妹.dataset到false，使用.querySelector()与属性选择".title[data-clicked=true]"仅选择被点击change处理程序中的元素。

window.onload = function() { 
 
    var color = document.getElementById('input-color'); 
 
    var elems = document.querySelectorAll('.title'); 
 

 
    function chancheColor() { 
 
    for (var i = 0; i < elems.length; i++) { 
 
     elems[i].addEventListener('click', function() { 
 
     for (var j = 0; j < elems.length; j++) { 
 
      elems[j].dataset.clicked = false; 
 
     } 
 
     this.dataset.clicked = true; 
 
     color.click(); 
 
     }); 
 
    } 
 
    } 
 
    color.addEventListener('change', function() { 
 
    var clicked = document.querySelector(".title[data-clicked=true]"); 
 
    if (clicked) { 
 
     console.clear(); 
 
     clicked.style.color = this.value; 
 
    } 
 
    else { 
 
     console.log("Click a .title element to change the elements' color"); 
 
    } 
 
    }); 
 
    
 
    chancheColor(); 
 
};

<input id="input-color" type="color"> 
 
<p class="title">First</p> 
 
<p class="title">First</p> 
 
<p class="title">First</p>