功能由不工作

Question

我試圖設置DIV不同的CSS樣式型動物的ID，但jQuery的功能被改變着， 這裏和例如不同的ID：

demo

我需要的功能爲每個div不同。

$("#name").click(function(e){ 
    $("#tool").show(); 
    $("#tool").offset({left:e.pageX,top:e.pageY}); 

      $("#text-tool #left").click(function(){        
       $("#name").css('text-align','left'); 
      }); 
      $("#text-tool #center").click(function(){        
       $("#name").css('text-align','center'); 
      }); 
      $("#text-tool #right").click(function(){         
       $("#name").css('text-align','right'); 
      }); 
      $("#color-tool #white").click(function(){        
       $("#name").css('color','white'); 
      }); 
      $("#color-tool #red").click(function(){        
       $("#name").css('color','red'); 
      }); 
      $("#color-tool #blue").click(function(){         
       $("#name").css('color','blue'); 
      }); 
      $("#text-tool #bold").click(function(){        
       $("#name").css('font-weight','bold'); 
      }); 
      $("#text-tool #italic").click(function(){        
       $("#name").css('font-style','italic'); 
      }); 

}); 
$("#company_name").click(function(a){ 
    $("#tool").show(); 
    $("#tool").offset({left:a.pageX,top:a.pageY}); 

      $("#text-tool #left").click(function(){        
       $("#company_name").css('text-align','left'); 
      }); 
      $("#text-tool #center").click(function(){        
       $("#company_name").css('text-align','center'); 
      }); 
      $("#text-tool #right").click(function(){         
       $("#company_name").css('text-align','right'); 
      }); 
      $("#color-tool #white").click(function(){        
       $("#company_name").css('color','white'); 
      }); 
      $("#color-tool #red").click(function(){        
       $("#company_name").css('color','red'); 
      }); 
      $("#color-tool #blue").click(function(){         
       $("#company_name").css('color','blue'); 
      }); 
      $("#text-tool #bold").click(function(){        
       $("#company_name").css('font-weight','bold'); 
      }); 
      $("#text-tool #italic").click(function(){        
       $("#company_name").css('font-style','italic'); 
      }); 


}); 

Answer 1

因爲點擊沒有覆蓋其它點擊事件，所以附加。

使用

$(selector).off("click").on("click", .... 

但設計可以​​改善大的時候。沒有必要添加大量事件。

<button class="change" data-prop="font-weight" data-value="bold">BOLD</button> 
<button class="change" data-prop="font-color" data-value="blue">BLUE</button> 

比數據點擊處理程序和使用事件委託屬性來控制什麼改變。使它更容易維護。

(function(){ 
    var activeElem = "#name";  
    $("#name, #company_name").click(function(){ 
     activeElem = this; 
    });  
    $(document).on("click", "button", function() { 
     var btn = $(this); 
     $(activeElem).css(btn.data("prop"), btn.data("value")); 
    });  
}());