Question

我正在为一个学校项目制作一个小游戏，基本上有20个盒子。 10个框的值为-2,5个框的值为2,3个框的值为0,2个框的值为-5和5.所以我的问题是，如何确定单击了哪个框有哪些价值？

初始化我的方框的代码：

shuffle(numbers); // number.length is 20
for(var i = 0; i < numbers.length; ++i)
{
    $('#buttons').append('<button class="boxes" id="' + numbers[i] + '">' + numbers[i] + '</button>');
}

我尝试过的代码：

$('#buttons').append('<button class="boxes" id="' + numbers[i] + '" onclick="clicked(this);">' + numbers[i] + '</button>'); // made function called clicked with alert in return

$('button#-2).click(function () {
    alert('Clicked on -2 box');
});

但似乎这些代码似乎都没有显示我点击了哪个框的警报。我错过了什么吗？

Answer 1

您可以使用按钮内部的文本，而不是依赖于框的ID来了解它们的值是什么（这是错误的，因为ID应该是唯一的）。如果你实际上不应该在他们的文本中有这个（我猜这是一个猜谜游戏？），你可以使用数据属性为它们分配值：

var buttons = $('#buttons');
for (var i = 0; i < numbers.length; i++) {
    $('<button class="boxes"></button>')
        .data('number', numbers[i])
        .click(function() { alert('Clicked on ' + $(this).data('number')); })
        .appendTo(buttons);
}

Answer 2

要知道点击了哪些方框，您可以这样做：

$('.button').click(function() {
    alert($(this).attr('id'));
    alert($(this).html());
});

第一个提示会显示已点击框的ID 第二个将显示单击框的值

Answer 3

你的追加中有一点语法问题，这是它的工作原理：

for(var i = 0; i < numbers.length; ++i)
{
    $('#buttons').append('<button class="boxes" id="button' 
                        + numbers[i] + '">' + numbers[i] + '</button>');
}

您可以使用相同的功能来处理所有点击

function click_handler(){
    alert('Clicked on ' + this.id);
}

$('button.boxes').click(click_handler);

尝试this fiddle

中的示例

JQuery点击'按钮

3 个答案: