javascript - 在循环外传递 foreach id 以使用 JavaScript 更新表单

Question

我想定期更新权限状态，并且将根据给定的 Angular 色授予权限。

每个 Angular 色都有自己的 ID，并且正在显示，但我还必须更新 Angular 色 ID 的权限，但使用 foreach 循环时，我的 UI 会分散到表单中。那么如何给表单提供 id 来更新表单中的元素。

我通过 javascript 获取 Id，但它总是给出循环的第一个 id。

Blade.php

            <div class="col-lg-3 col-md-3">
                <a href="#" id="createType" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i> Add Positions</a>
                @foreach($data as $key=>$item)
                <div class="roles-menu">
                    <ul class="nav" id="item_id" onclick="item()">
                        <li><a href="" onclick="giveinput()">{{ $item->name }}</a></li>
                        {{--<div id="input">{{ $item->id }}</div>--}}

                    </ul>
                    <input id="input" value="{{ $item->id }}">
                </div>

                @endforeach
            </div>

                <form method="post" action="{{ url('/system-configurations/roles-permission/permission') }}">
                    {{ csrf_field() }}


                    <div class="col-sm-9 module-access">
                            <h6 class="panel-title mb-20 display-ib">Module Access</h6>
                            <div class="pull-right  mb-10">

                            </div>

                        <div id="divID"></div>
</div>
                    <!-- /.row -->
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <button class="btn btn-info">Save</button>
                        </div>
                    </div>
                </form>

脚本

<script>
function giveinput(){
    $("#input").each(function() {
        var input=document.getElementById("input").value;
        var div = document.getElementById('divID');
        div.innerHTML = div.innerHTML + input;
        alert(div.innerHTML );
        e.preventDefault();
        });
    }
</script>

Answer 1

请查看下面的示例，了解如何迭代 DOM 元素。 “id”属性应该用作 DOM 元素的唯一引用。也就是说，我建议您改用“name”属性并使用它查询元素。

下面的代码可能无法回答您的问题，但至少指出如何迭代 html 以获得正确的 id 值。

var htmlElements = $('input[name="input"]');

htmlElements.each(function (index, element) {
  console.log(element.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="input" value="1">
<input name="input" value="2">
<input name="input" value="3">
<input name="input" value="4">