单击和鼠标移动（更改多个目标的颜色）

Question

$(function(){
    var isMouseClicked=false;
    $("#diody td.LED").click(function(){
        if(wybrany_kolor=="red"){
            $(this).css("background-image","url(led_red2.png)")
            .css("transition", "all 0.25s ease-in-out");
            $('.LED').mousedown(function(){
                isMouseClicked = true;  
               });
               $("#app").mouseup(function(){
               isMouseClicked = false;
               });
               $(".LED").mousemove(function(){
                   if(isMouseClicked){
                     $(this).css("background-image","url(led_red2.png)")
                     .css("transition", "all 0.25s ease-in-out");
                   }
               });                  
        }
    });
    $("#diody td.LED").click(function(){
        if(wybrany_kolor=="yellow"){
        $(this).css("background-image","url(led_yellow.png)")
        .css("transition", "all 0.25s ease-in-out");
        $('.LED').mousedown(function(){
            isMouseClicked = true;  
           });
           $("#app").mouseup(function(){
           isMouseClicked = false;
           });
           $(".LED").mousemove(function(){
               if(isMouseClicked){
                 $(this).css("background-image","url(led_yellow.png)")
                 .css("transition", "all 0.25s ease-in-out");
               }
           });
        }
    });

我有这样的东西。我期望的是：当我点击“LED”时，它需要改变颜色，当我点击“LED”并将鼠标移到其他“LED”上时，他们需要将颜色更改为相同的颜色。 问题是：它使用一种颜色，但是当我将颜色更改为另一种颜色时，例如从红色变为黄色并单击（按住鼠标单击）并移过其他颜色时，它正在改变颜色但为红色（应该是黄色）。如果我单击一次它的更改颜色属性，然后我可以单击并移动鼠标并且它的工作良好。问题在于第一次颜色变化。

http://jsfiddle.net/9Q8dU/

diody- 它的桌子上装满了 td.LED（有点像国际象棋）。

编辑： 解决了

$(function () {
var isMouseClicked=false;
var $led = $('.LED').click(function(){
    if(wybrany_kolor=="red")$(this).css("background-image","url(led_red2.png)");
    else if(wybrany_kolor=="yellow")$(this).css("background-image","url(led_yellow.png)");
    else if(wybrany_kolor==green)$(this).css("background-image","url(led_green.png)");
    })
    .mousedown(function(){ isMouseClicked=true;})
    .mousemove(function () {
    if(isMouseClicked){
        if(wybrany_kolor=="red")$(this).css("background-image","url(led_red2.png)");
        else if(wybrany_kolor=="yellow")$(this).css("background-image","url(led_yellow.png)");
        else if(wybrany_kolor==green)$(this).css("background-image","url(led_green.png)");
    }
});
$(document).mouseup(function () {
    isMouseClicked=false;
})

Answer 1

我认为您可能误解了事件处理程序的附加方式。你有：

$("#diody td.LED").click(function(){ ...

在代码中列出了两次，每个都有不同的处理程序。这是为每个匹配的选择器触发的两个函数。即使这就是你想要的，那也是一种非常混乱的方式。

接下来，这些点击处理程序中有 $('.LED').mouse* 处理程序。这将导致附加 n-clicked 鼠标事件处理程序的累积效应。

我认为你的设计需要重构。