javascript - 当我只想更改一个 id 时，多个 id 会受到影响(javascript 和 jquery)

Question

我在 .color_container 中有许多 .box 元素。我编写了这个函数，这样当我单击其中一个框时，我就可以更改其背景颜色。这对于一个框效果很好，但是当我单击另一个框并更改其颜色时，我单击的所有其他框也会受到影响。

我只想更改我刚刚单击的框的颜色。这是我的代码。非常感谢您对此提供的任何帮助。

function defineColor(){
$(".color_container .box").click(function(){
    var boxToModify = $(this);

    if( $(this) .hasClass("plus") ){
        $(this) .css("background-color", "rgb(255, 255, 255)")
                .removeClass("plus")
                .contents().remove();
    };

    var rgb = $(this).css("background-color").match(/\d{1,3}/g);        
    $("#box_r input").val(rgb[0]);
    $("#box_g input").val(rgb[1]);
    $("#box_b input").val(rgb[2]);

    $(".box input").keyup(function(event){

        var value = $(this).val();

        if(value > 255 || isNaN(value) ){
            alert("Error! Input must be a number 255 or less.");
        }else if( value >= 0 && value <=255){
            var r = $("#box_r input").val();
            var g = $("#box_g input").val();
            var b = $("#box_b input").val();
            var output = "rgb(" + r + ", " + g +", " + b + ")";

            $(boxToModify).css("background-color", output);
        };
    });
});

};

Answer 1

您可能想要更改此设置:

$(".box input").keyup(function(event){

对此:

$(this).find('input').off('keyup').on('keyup', function(event) {

每次单击单个框时，您都会将 keyup 事件绑定(bind)到具有该类的所有框。