点击鼠标移动(改变多个目标的颜色)

Click and mousemove (changing color multiple targets)

本文关键字:目标 颜色 改变 鼠标 移动      更新时间:2023-09-26
$(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/

didy -它的表充满了td。(如象棋)

编辑:解决了

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

我想你可能误解了事件处理程序是如何附加的。你有:

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

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

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