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; i＆lt; elems.length; i ++）我不知道，如何获得被点击的标题的当前值。

一般来说，如果是这样的话，如何在函数中传递一个参数呢？ color.addEventListener（'change'，function（）{}）;

Answer 1

你在for循环中多次将事件处理程序附加到颜色，不需要那样做。并且事件处理程序中的循环不是必需的，您只需要更改单击的'p'的颜色，因为您可以保存单击的p并在input-color的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处理程序中单击的元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: