具有相同名称的多个变量

我想要实现的是，单击对话框应该提醒由父函数定义的“颜色”变量，并且仅提供该变量。相反，如果我先点击红色，然后点击蓝色，然后点击蓝色对话框，我会看到两个提示：“红色”和“蓝色”，而不是“蓝色”。具有相同名称的多个变量

HTML：

<div class='clickable' id='red'>RED</div> 
<div class='clickable' id='green'>GREEN</div> 
<div class='clickable' id='blue'>BLUE</div>

JS：

$('.clickable').on('click', function() { 
    var color = $(this).attr('id'); 

    $('<div class="dialog">').html(color).dialog(); 

    $('body').on('click', '.dialog', function() { 
     alert(color); 
    }); 
});

Live example。当然，我可以只保存变量和读它，like this：

$('.clickable').on('click', function() { 
    var color = $(this).attr('id'); 

    $('<div class="dialog" color="' + color + '">').html(color).dialog(); 
}); 


$('body').on('click', '.dialog', function() { 
    alert($(this).attr('color')); 
});

但也许有更好的解决方案？

来源

2011-11-29 Shevchuk

您的问题不是颜色，而是您将多个处理程序附加到.dialog。基本上，如果您在每个可点击的内容上点击三次，则会附加三个处理程序。每个处理程序都会触发正确的相应颜色，但所有三个都会响应。第二个例子工作的原因是因为你只附加了一次对话处理程序。我认为后一种方法是正确的做你想做的事。 –

我会理解，如果'颜色'变量只是每次点击所取代，但会变得更'色彩'变量...奇怪= |尽管如此，在不同的处理程序中“变色”变色还是会彼此隔离？ – Shevchuk

这样的事情呢？

$('.clickable').on('click', function() { 
    var color = $(this).attr('id'); 

    var dialog = $('<div class="dialog">'); 
    dialog.html(color).dialog(); 

    dialog.on('click', function() { 
    console.log(color); 
    alert(color); 
    }); 
});

来源

2011-11-29 23:27:44 Peter

嗯，到目前为止工作完美...会玩多一点，这可能是一个解决方案。 – Shevchuk

我想就是这样，谢谢！ – Shevchuk

这不应该起作用。打开更多对话框（它们在JSFiddle上彼此堆叠，但只需移动它们并单击旧对象，它们将显示新的颜色值）。 – 2011-11-29 23:57:00

编辑：

$('.clickable').on('click', function() { 
    var color = $(this).attr('id'); 

    var dialog = $('<div class="dialog">'); 
    dialog.html(color).dialog(); 

    dialog.on('click', (function(color) { return function() { 
    console.log(color); 
    alert(color); 
    }; })(color)); 
});

这应该工作将旧的对话了。

来源

2011-11-29 23:24:54

同样的问题：http://jsfiddle.net/NzRum/ – Shevchuk

但你问的问题现在已经解决了（var是孤立的）。 JSFiddle代码的问题在于有很多处理程序，并且在单击对话框时全部被激活。你应该以某种方式正确地清理对话框/他们的处理程序。他们在堆叠。 – 2011-11-29 23:53:16

具有相同名称的多个变量

回答

相关问题