jquery - 如何在jquery中获取id = "id[{{$index}}]"的元素

Question

我有一个 Blade 表单，显示已保存在数据库中的帐户 因为有人可以添加很多帐户，所以我首先在其中添加了一个 foreach ，然后添加了一个变量 $i 来将 index 获取到元素的id 像这样

<div style="display: none;">{{ $i = 0 }}</div>
        @if(!empty($accounts))
            @foreach($accounts as $account)
<span class="text-primary number h6 font-weight-bold" data-toggle="modal" data-target="#addDirect{{$i}}">دایرکت اتوماتیک</span><span></span>
<!--add Direct Modal -->
<form action="{{ route('update_automatic_direct') }}" method="post" id="frm-add-direct[{{$i}}]">
    <div class="modal fade" id="addDirect{{$i}}" tabindex="-1" role="dialog" aria-labelledby="addmodaldirect" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addmodaldirect"> دایرکت اتوماتیک</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                         <input type="text" name="direct_page_id" id="direct-page-id[{{$i}}]">
                         <label for="direct-count" class="col-sm-5 col-form-label font-weight-bold h6 pr-0">حداکثر دایرکت در ساعت:</label>
                         <div class="col-sm-5 pr-0">
                              <input type="text" class="form-control form-control-sm" id="direct-count[{{$i}}]" name="direct_count" placeholder="0">
                         </div>
                    </div>
                    <div class="form-group text-right">
                         <label class="font-weight-bold h6">متن پیام</label>
                         <textarea id="new-direct[{{$i}}]" class="form-control directText" name="directText" type="textarea" rows="5"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                     <input type="submit" class="btn btn-primary" name="save_direct" id="add-Direct" value="ذخیره">
                     <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                     <meta name="csrf-token" content="{{ csrf_token() }}" />
                </div>
            </div>
        </div>
    </div>
</form>
{{ $i + 1 }}

@endforeach @endif

现在这是我的脚本标签

<script type="text/javascript">
$('#frm-add-direct').on('submit' , function(e){
    e.preventDefault();
    var data = $(this).serialize();
    var url = $(this).attr('action');
    var post = $(this).attr('method');
    console.log(data);
    $.ajax({
        type : post,
        url : url,
        data : data,
        dataTy: 'json',
        success:function(data)
        {
            alert(data);
            $("#addDirect").modal('hide');
        }
    });
});

现在我的问题是，我有很多表单标签，如何找到被单击以更改它的用户。因为我还需要 id 来更新数据库中的记录。

Answer 1

为您的表单使用一个类

<form class="submitForm" action="{{ route('update_automatic_direct') }}" method="post" id="frm-add-direct[{{$i}}]">

将您的输入更改为

<input type="text" name="direct_page_id" id="direct-page-id[{{$i}}]" value="{{$i}}">

使用该表单类提交您的数据

 $('.submitForm').on('submit' , function(e){
        e.preventDefault();
        var data = $(this).serialize();
        var url = $(this).attr('action');
        var post = $(this).attr('method');
        var form = $(this);
        var id = form.find('[name="direct_page_id"]').val();//get the id of the element based on the submitted form


        console.log(id);
        $.ajax({
            type : post,
            url : url,
            data : data,
            dataTy: 'json',
            success:function(data)
            {
                alert(data);
                form.find("#addDirect").modal('hide');
            }
        });
    });

我建议您最好使用数据库中存储的帐户的实际ID