1

当我运行此代码时： 

    <div id = "1-round" class="btn-group btn-group-toggle btn-lg " data-toggle="buttons" >
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        <script>
           $('label').click( function() {
          $(this).addClass('btn-primary').removeClass('btn-default').siblings().removeClass('btn-primary').addClass('btn-default');
         if ($('#id_players_choice_0').is(':checked')) {
         x = id_players_choice_0.value};
         if ($('#id_players_choice_1').is(':checked')) {
         x = id_players_choice_1.value};
          alert(x);
         });
        </script>
        {{checkbox}}
    </label>
{% endfor %}
</div>

我仅在第二次或第三次按下按钮时才获得值（x 变量）。
有没有办法来解决这个问题？
谢谢！

4

1 回答 1

0

选择$('label')器将选择已经是文档一部分的标签。此外，将单击处理程序放在循环中也不好，因为它将在多个元素上乘以相同的处理程序。将该脚本移动到文档的末尾，就在结束</body>标记之前。

此外，请确保声明您的变量x，使其具有正确的范围。

<div id = "1-round" class="btn-group btn-group-toggle btn-lg " data-toggle="buttons" >
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        {{checkbox}}
    </label>
{% endfor %}
</div>
<script>
    $('label').click( function() {
        var x;
        $(this).addClass('btn-primary').removeClass('btn-default')
               .siblings().removeClass('btn-primary').addClass('btn-default');
        if ($('#id_players_choice_0').is(':checked')) {
            x = id_players_choice_0.value;
        }
        if ($('#id_players_choice_1').is(':checked')) {
            x = id_players_choice_1.value;
        }
        alert(x);
    });
</script>

如果您不能保证在脚本执行之前所有标签都已创建，请使用事件委托：

    $(document).on('click', 'label', function() { // ...etc
于 2018-12-02T17:51:10.687 回答