如何将 php 变量传递给模态引导程序 4

Question

我有一个 laravel 项目，其中有一个递归，其中我想为每个元素创建不同的 html 元素。 当我点击这些链接时，我想根据我点击的元素传递正确的变量来打开模式。

编辑：编辑 anteprima.blade.php：

<div class="rounded py-3 col-md-3 my-2 border mr-4">
<h5 class="font-weight-bold ellipsis"><i class="fas fas fa-list-ul mr-2"></i>{{ $playlist->nome }}</h5>

<small class="text-muted">Creata: {{ $playlist->created_at->diffForHumans() }}</small>

<div class="row px-3">
    <div>
        <button class="btn-sm btn-light border mr-2 open-modal my-2">Rinomina</button>
    </div>
    <div>
        <form method="post" action="{{ route('playlists.destroy', $playlist) }}">
            @csrf
            @method('delete')
            <button type="submit" class="btn-sm btn-secondary border my-2">Cancella</button>
        </form>
    </div>
</div>

<script type="text/javascript">
$( document ).ready(function() {

    $(document).on("click", ".open-modal", function () {
        var myvariable = $(this).data('myvariable');
        $('#rename_playlist').modal('show', myvariable);
        console.log(myvariable);

    });
});
</script>

使用我现在拥有的代码，模态始终采用最后一个 $playlist，但我希望每个链接都有一个不同的 $playlist。

编辑：编辑后的 index.blade.php：

@extends('layouts.dashboard')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="btn btn-warning rounded py-3 col-md-3 my-2 border mr-4" data-toggle='modal' data-target='#create_playlist'>
            <h5 class="font-weight-bold ellipsis"><a href="#"><i class="fas fa-plus-square mr-2"></i>Nuova Playlist</a></h5>
        </div>
@foreach ($playlists as $playlist)
    @include('anteprima')
@endforeach
    </div>
</div>

<div class="modal fade" id="rename_playlist" data-myvariable='{{ json_encode($playlist) }}' tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content">
            <form method="post" action="{{ route('playlists.update', $playlist) }}">
                @csrf
                @method('patch')
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold" id="exampleModalCenterTitle">Rinomina {{ $playlist->nome }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <input type="text" name="nome" value="{{ old('nome') }}" class="form-control" placeholder="Nome della playlist" required />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancella</button>
                    <button type="submit" class="btn btn-warning">Rinomina</button>
                </div>
            </form>
        </div>

    </div>
</div>

@endsection

更新：我为递归内部的每个模态使用一个 id 解决了它。

Answer 1

您可以通过附加到data属性来向模态发送额外的数据，如下所示：

<div class="btn btn-warning rounded py-3 col-md-3 my-2 border mr-4" data-toggle='modal' data-target='#create_playlist' data-myvariable="your_data_here">
{{content}}
<div>

然后在 JS 中，你可以这样做：

var myvariable = $(this).data('myvariable');