javascript - jQuery:如何制作预定义的颜色选择器？

Question

当我单击颜色选择器的一种颜色时，我希望这样:http://prntscr.com/7rnafa选定的颜色会在目标项目上发生变化。

我开始编写代码的开头部分，但其余部分需要帮助。

jQuery:

$(function() {
    $(".colorPickerToggleButton").on("click", function(e) {
        $(".colorPickerToggleButton").toggleClass("active");
    });
    $('.colorPickerToggleButton').toggle(function() {
        $(".colorPicker").addClass("shown");
    });

    var color_elements_background = ".nodeList .categoryStrip";

    var color_elements_text = "a:link, a:visited";

    $(".colorPicker span").on("click", function() {
        var customColor = $(this).attr("custom_color");
    });
});

我想要的正是，例如，如果我单击颜色选择器的一种颜色，则单击的颜色将应用于目标元素。示例:http://prntscr.com/7rncra

谢谢。

Answer 1

尝试将现有函数修改为如下所示:

$(".colorPicker span").on("click", function() {
    var customColor = $(this).attr("custom_color");
    $(color_elements_background).css("background-color", customColor);
    $(color_elements_text).css("color", customColor);
});

这将使用 jQuery 设置目标元素上的 css 颜色。

它的工作方式是将查询字符串直接传递到 jQuery 中，并让它完成选择元素的繁重工作。然后它使用 jQuery .css function 将 css 样式应用到这些元素。