0

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

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

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

};

4

1 回答 1

2

你可能想改变这个：

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

对此：

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

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

于 2012-04-05T00:35:10.140 回答