mehrere IDs betroffen, wenn ich nur eine (javascript & jquery) ändern möchte

Question

Ich habe eine Anzahl von .box Elemente innerhalb einer .color_container. Ich habe diese Funktion so geschrieben, dass ich, wenn ich auf eines dieser Felder klicke, die Hintergrundfarbe ändern kann. Das funktioniert gut mit einer Box, aber wenn ich auf eine andere klicke und ihre Farbe ändere, sind auch alle anderen Kästchen betroffen, auf die ich geklickt habe.

Ich möchte nur die Farbe der Box, die ich gerade angeklickt habe, ändern. Hier ist mein Code. Vielen Dank im Voraus für jede Hilfe dabei.

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

Sie könnten dies ändern möchten:

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

dazu:

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

Sie sind auf jeden Klick eines einzigen Box ein keyup Ereignis für alle Boxen mit dieser Klasse zu binden.