Question

我有一个创建表的循环：

for(m=1; m<7; m++){

    document.getElementById('content').innerHTML += 
        ('<tr>' +
            '<td>' + m + '</td>' + 
            '<td><input type="checkbox" id="switch'+m+'"><label class="switch" for="switch'+m+'">Button ' + m + '</label></td>' +
        '</tr>')
}

在第二个TD的每一行中都是必须分配给每一行的按钮。每个按钮都有自己的行。当我从该行点击按钮时，我想从第一个TD中提醒m。我的意思是如果我点击按钮是switch2我将从m＆＃34; 2＆＃34;得到警报。这是我试过的按钮代码：

var buttons = "#switch" + m

$(function() {
    $(buttons).button();
    $(buttons).click(function(){                        
        alert(m);                                   
    });
});

这不起作用，因为所有按钮都警告loop = 6的最后一个值。我知道它很困惑，但我希望你能理解。非常感谢您的帮助

Answer 1

将其更改为：

$(function() {
    var localM = m;
    $(buttons).button();
    $(buttons).click(function(){                        
        alert(localM);                                   
    });
});

问题是警报绑定到变量m而不是m的值。通过在闭包内部分配局部变量，可以捕获循环中该点的m值。

Answer 2

你也可以用另一种方式绑定事件，用于样本

$("tr > td > input[type=checkbox]").function(e){                        
        alert(event.target.id);                                   
        //OR
        alert(this.id);                                   
});

如果可以在元素

中添加任何类属性

那么这是安全的

 $("tr > td > input[type=checkbox].switch").function(){                        
        alert(event.target.id);                                   
    });

Answer 3

有很多方法可以做到这一点。这是一个：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
    // Populate Form
    for (var m = 1; m <= 7; m++)
    {
        $('#content').append('<tr>' +
            '<td>' + m + '</td>' + 
            '<td><input type="checkbox" class="clickMe" id="switch'+m+'"><label class="switch" for="switch'+m+'">Button ' + m + '</label></td>' +
        '</tr>');
    }

    // Handle Click
    $('.clickMe').click(function()
    {
        alert('You clicked on : ' + $(this).attr('id')); // alerts "switchN" e.g. switch1

        // or //

        alert('You clicked on : ' + $(this).attr('id').replace('switch', '')); // // alerts "N" e.g. 1
    });

});

</script>

<table id="content"></table>

Answer 4

这里有一点重构（减去button()插件）：

var $content = $('#content');
for (var m = 1; m < 7; m++) {
    $content.append(
        '<tr>' +
            '<td>' + m + '</td>' +
            '<td>' +
                '<input type="checkbox" id="switch' + m + '">' +
                '<label class="switch" data-num=' + m + ' for="switch' + m +'">Button ' + m + '</label>' +
            '</td>' +
        '</tr>'
    );
}

$('label.switch').click(function(e) {
    e.preventDefault();
    alert($(this).data('num'));
});

JSFIDDLE

从循环中获取变量

4 个答案: