Question

我想要实现的是点击对话框应警告由父函数定义的'color'变量，并且只有那个。相反，如果我首先点击，比如说RED，然后点击，比如说BLUE，然后点击对话框'blue'，我有两个警告：'red'和'blue'而不是'blue'一个。

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

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

Answer 1

编辑：

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

这也适用于旧对话框。

Answer 2

这样的事情怎么样？

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

具有相同名称的多个变量

2 个答案: