Home / Questions / 276975
Accepted
MNibor
Asked: 2020-07-06 05:03:09 +0800 CST 2020-07-06 05:03:09 +0800 CST

Laravel 中的模态从记录中获取数据

  • 772

我有一个加载数据的页面在此处输入图像描述

按钮代码如下：

<div class="elements-list clearfix">
    {{-- Button to Open the Modal --}}
    <button type="button" class="pull-left margin-clear btn btn-sm btn-info btn-animated" data-toggle="modal" data-target="#myModal">
    Ampliar<i class="fa fa-eye"></i>
    </button>

    <a href="{{ $link->link }}" target="_blank" class="pull-right margin-clear btn btn-sm btn-default-transparent btn-animated">Ir a la Página<i class="fa fa-link"></i></a>
</div>

使用按钮，我触发了如下所示的模式：

在此处输入图像描述

加载模态的代码如下：

{{-- The Modal --}}
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        {{-- Modal Header --}}
        <div class="modal-header">
            <h4 class="modal-title">{{ $link->title }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times; 
 </button>
        </div>

        {{-- Modal body --}}
        <div class="modal-body">
            {{ $link->description }}
        </div>

        {{-- Modal footer --}}
        <div class="modal-footer">
            <a href="{{ $link->link }}" class="btn btn-info">Ir a la Página</a>
            <a href="#" class="btn btn-danger" data-dismiss="modal">Cerrar</a>
        </div>
    </div>
   </div>
  </div>

我遇到的问题是，无论我在显示的所有数据中按下哪个按钮，它总是向我显示页面上显示的最后一条记录的数据。我怎样才能解决这个问题 ？有人可以帮帮我吗？从已经非常感谢

php

1 Answers

  1. Best Answer

    我会这样做：将一个类放到展开按钮上，然后用 jquery 设置要在模态中显示的值：

         <button type="button" 
        class="pull-left margin-clear btn btn-sm btn-info btn-animated btnShowInfo" 
        data-toggle="modal" 
        data-title="titulo de ejemplo"
        data-description="my own description"
        data-link="https://es.stackoverflow.com/"
    >
        Ampliar<i class="fa fa-eye"></i>
        </button>

$(document).on('click', '.btnShowInfo', function(e){
    e.preventDefault();
    var button = $(this);
    var title = button.data('title');
    var description= button.data('description');
    var link = button.data('link');

    $('.modal-title').html(title);
    $('.modal-body').html(description);
    $('.btn-info').attr('href', link);

    $('#myModal').modal('show');
});

    我希望它对你有帮助。问候。

    • 2