点击鼠标移动(改变多个目标的颜色)
Click and mousemove (changing color multiple targets)
$(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点鼠标事件处理程序的累积效应。
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 高亮显示时编辑文本大小和颜色
- 用与线条相同的颜色填充多折线图上的点
- 更改使用Chart.js创建的图表中的轴线颜色
- 如何使用jquery更改html中的背景颜色
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- 动态更改高图中的系列颜色
- 对一个对象使用reduce可以返回一个没有't在数组中包含目标字母
- Href:当前DIV中的目标ID
- jsf中两个字符串的颜色代码差异
- 我们如何使用css或JavaScript在i/j上更改句点(点)的颜色
- d3.hexbin插件-动态定义颜色域以适应数据
- 我如何制作一个JS函数,它可以从相似的原始颜色双向更改为某个颜色
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 链接'当目标为空时,s的颜色不会更改为可见
- 力导向图-如果节点同时是源和目标,则定义节点的颜色
- 如何在流星中设置事件目标的文本和颜色?
- 点击鼠标移动(改变多个目标的颜色)