0

内にいくつかの.box要素があります.color_container。これらのボックスの 1 つをクリックすると、その背景色を変更できるように、この関数を作成しました。これは 1 つのボックスでは問題なく機能しますが、別のボックスをクリックしてその色を変更すると、クリックした他のすべてのボックスも影響を受けます。

クリックしたばかりのボックスの色だけを変更したいと思います。これが私のコードです。これについて何か助けてくれてありがとう。

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 に答える