Question

我想在输入类型=颜色上获得新颜色，如果我使用jquery它正在工作

$(document).ready(function() {
    var colorPicker = $('.input-color');

        colorPicker.on("change", function watchColorPicker() {
            var val = $(this).val();
            $(".title").each(function() {
                $(this).css({'color' : val});
            });
        });
});

但我不知道如何写本地js。错误是.change或.on不是函数

window.onload = function(){

    var colorPicker = document.getElementsByClassName('input-color');
    var text = document.getElementsByClassName('title');

    function colorChange(color) {
        for(var j =0; j < color.length; j++) {

            color[j].addEventListener('change', function () {
                var newColor = this.value;

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

    colorChange(colorPicker);
};

Answer 1

我已经压缩了你的纯js代码，看起来干净而且轻盈。还减少了循环次数。

＆＃13;

const colorPicker = document.querySelector('#input-color');
const elems = document.querySelectorAll('.title');

colorPicker.addEventListener('change', function() {
  Array.from(elems).forEach(v => v.style.color = this.value);
});

＆＃13;

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

＆＃13;

更改输入类型颜色JavaScript的事件

1 个答案: