使用輸入顏色單擊時更改顏色

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>