Question

我希望按时间更新权限的状态，并根据给定的角色给出权限。

每个角色都有自己的ID并且它正在显示但是我还必须更新关于角色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">

Answer 2

我建议你使用class而不是id，因为id是唯一的

<input class="input" value="{{ $item->id }}">

之后，您可以选择＆＃39;这个＆＃39;在.each函数中使用jquery选择器

$(".input").each(function() {
    var input= $(this).val();
    //... rest of your code
});

Answer 3

我这样做只是直接从函数中提供id。而不是使用Id获取元素。

   <li><a  onclick="getID('{{ $item->id }}')">{{ $item->name }}</a></li>


        <script>
        function getID(val){
            $("#input").each(function() {
                var div = document.getElementById('divID');
                div.value = val;
                e.preventDefault();

                });
            }
        </script>

将foreach id传递给外部循环以使用JavaScript更新表单

3 个答案: