Javascript 具有相同名称的多个变量

我想实现的是，单击对话框应该提醒父函数定义的“color”变量，并且只提醒那个变量。相反，如果我先单击红色，然后单击蓝色，然后单击对话框“蓝色”，我会收到两个警报：“红色”和“蓝色”，而不是只有“蓝色”一个

HTML:

红色
绿色
蓝色

JS:

$（'.clickable'）。在（'click'，function（）上{
var color=$（this.attr（'id'）；
$（''）.html（颜色）.dialog（）；
$（'body'）。在（'click'，'dialog'，function（）上{
警报（颜色）；
});
});

。当然，我可以保存该变量并读取它：

$（'.clickable'）。在（'click'，function（）上{
var color=$（this.attr（'id'）；
$（''）.html（颜色）.dialog（）；
});
$（'body'）。在（'click'，'dialog'，function（）上{
警报（$（this.attr（'color'））；
});

但也许有更优雅的解决方案？

编辑：

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

$（'.clickable'）。在（'click'，function（）上{
var color=$（this.attr（'id'）；
变量对话框=$（''）；
dialog.html（color.dialog（）；
在（'click'，（函数（颜色）{返回函数（）{
控制台。日志（颜色）；
警报（颜色）；
})(颜色);；
});

---

这应该也适用于旧对话框。

像这样的东西怎么样

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

$（'.clickable'）。在（'click'，function（）上{
var color=$（this.attr（'id'）；
变量对话框=$（''）；
dialog.html（color.dialog（）；
对话框。在（'单击'，函数（）上）{
控制台。日志（颜色）；
警报（颜色）；
});
});

您的问题不在于颜色，而在于将多个处理程序附加到.dialog。基本上，如果您在每个Clickable上单击三次，您将附加三个处理程序。每个处理程序触发正确的相应颜色，但所有三个都将触发响应。第二个示例之所以有效，是因为您只附加了一次对话框处理程序。我认为后一种方法是正确的，可以满足您的需要。我可以理解，如果每次单击都会替换“color”变量，但是会出现更多的“color”变量…奇怪=|不过，不同处理程序中的“color”变量是否会以某种方式彼此隔离？嗯，目前为止效果很好…将使用它玩得更多，这可能是一个解决方案。这不应该起作用。打开更多对话框（它们在JSFIDLE上彼此堆叠，但只需移动它们并单击旧的对话框，它们就会显示新的颜色值）。但是您提出的问题现在已经解决了（var是独立的）。JSFiddle代码的问题是有许多处理程序，在单击一个对话框时所有处理程序都被激活。您应该以某种方式正确清理处理程序上的对话框/它们的。它们在堆积。

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

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

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