具有相同名称的多个变量

Multiple variables with the same name

本文关键字：变量      更新时间：2023-09-26

我想要实现的是，点击对话框应该提醒'color'变量由父函数定义，只有那一个。相反，如果我先点击，比如说，红色，然后点击，比如说，蓝色，然后点击对话框"蓝色"，我有两个警报:"红色"answers"蓝色"，而不是只有"蓝色"一个。

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

生活的例子。当然，我可以保存这个变量然后读取它，像这样:

$('.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() {
    console.log(color);
    alert(color);
  });
});

EDIT:

$('.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));
});
相关文章：