Question

我借了一些代码来制作3状态按钮。我正在尝试为每个元音设置一个按钮。第一个完成任务，其他的似乎不变色。我不知道该如何解决。

我尝试上下移动foreach循环，但似乎并没有解决问题。

@foreach ($vocales as $vocal)
<div class="p-1 d-inline-block">
    <div class="btn-group-toggle d-inline" data-toggle="buttons">
        <input type="radio" name="high" value="2" checked hidden>
        <input type="radio" name="high" value="1" hidden>
        <input type="radio" name="high" value="0" hidden>
        <button type="button" id="toggler" class="btn btn-secondary">{{$vocal}}</button>
    </div>
    <div id='result'></div>

    <script type="text/javascript">
        var $radios = $('input[type="radio"][name="high"]');
        $('#result').html($radios.filter(':checked').val());
        $('#toggler').click(function() {
            var colorClasses = ["btn-danger", "btn-success", "btn-secondary"];
            var $checked = $radios.filter(':checked');
            var $next = $radios.eq($radios.index($checked) + 1);
            if (!$next.length) {
                $next = $radios.first();
            }
            $next.prop("checked", true);
            var newValue = $radios.filter(':checked').val();

            $(this)
            .removeClass(colorClasses.join(" "))
            .addClass(colorClasses[newValue]);

            $('#result').html(newValue);
        });
    </script>
</div>
@endforeach

如果您能完成这项工作，我将不胜感激

Answer 1

每个#result必须具有唯一的标识符，例如＃result-1＃result-2等。在js脚本中也是如此。错误是第一个元素被更改，随后的元素被忽略。

尝试在foreach循环内将一些javascript嵌入laravel视图

1 个答案: