Question

当我运行此代码时：

    <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变量）。
有办法解决吗？
谢谢！

Answer 1

$('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

oTree和JavaScript检查类是否处于活动状态（已选中）

1 个答案: