多個ids影響，當我只想改變一個（javascript和jquery）

我有.box.color_container內的元素的數量。我寫了這個函數，當我點擊其中一個框時，我可以改變它的背景顏色。這適用於一個框，但是當我點擊另一個框並更改其顏色時，我點擊的所有其他框也受到影響。多個ids影響，當我只想改變一個（javascript和jquery）

我只想改變剛剛點擊的框的顏色。這是我的代碼。非常感謝您提供任何幫助。

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

};

來源

2012-04-05 ben

你可以發佈你的HTML。您可能有重複的元素符合您的選擇器標準。 – 2012-04-05 00:29:25

這不是問題，但請注意'$（boxToModify）'是不必要的，因爲'boxToModify'已經是一個jQuery對象（第三行代碼）。所以，你可以做'boxToModify.css（...' – 2012-04-05 00:31:02

你不應該在處理程序中添加處理程序，你的點擊處理程序會創建一個鍵，這是不好的 – AutoSponge 2012-04-05 00:33:49

你可能想改變這一點：

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

這樣：

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

要綁定一個keyup事件的所有箱子上一個機箱的每一次點擊類。

來源

2012-04-05 00:35:10 AlienWebguy

感謝您的提示，但是這並沒有做到 – ben 2012-04-05 00:42:44

你是否確定？沒有小提琴或任何東西，我堅持我的答案，嘿。 – AlienWebguy 2012-04-05 00:45:20

看起來當我交換位時，函數變得無法定義'value'或其他東西，因爲它不再修改任何一個盒子的背景顏色，我對此有點新（因爲我敢肯定，你可以從我的代碼中知道） – ben 2012-04-05 00:51:35

多個ids影響，當我只想改變一個（javascript和jquery）

回答

相關問題