Question

您好，我需要帮助来使用jQuery以模态形式传递src图像的数据。

gridimage_base_sample.sql.gz

我将id用户和userphoto（文件名）作为数据，然后将其传递给我的模态

view.blade.php
@foreach ($users as $user)
 <td>{{$user->name}}</td>
 <button class="btn-success showuser" 
  data-id="{{ $user->id }}" 
  data-userphoto="{{ $user->user_photo }}"
  data-toggle="modal" data-target="#modal-insert">
 <i class="fa fa-pencil"  align="center">Insert Proof</i>
 </button>
@endforeach

$(document).ready(function(){
    //Upload
    $(document).on('click', '.showuser', function() {
    $('#iduser').val($(this).data('id'));
    $('#userphoto').val($(this).data('userphoto'));
    });

});

如何使我的src可以包含id =“ userphoto”的值？谢谢你的建议

Answer 1

我认为一种解决方案可能是使用jquery（或js）从button元素中获取数据，然后使用jQuery（或js）将其注入模态中。我删除了一些内容以更清楚地说明该原理：

在此您将按钮传递给userphoto src：

<button class="btn-success showuser" data-userphoto="https://i.ytimg.com/vi/-hPRwRTQY8o/hqdefault.jpg">
    <i class="fa fa-pencil"  align="center">User 1</i>
</button>

然后让您的jQuery（或js）将其注入到模态中（显然，在这里您也可以将src属性发送到模态代码中声明的img元素-有多种方法可以执行此操作）：

$('.showuser').on('click', function() {
    $('#imagineThisIsYourModal').html('<img src="' + $(this).data('userphoto') + '"/>')
});

这里正在工作：https://jsfiddle.net/5qmuewkL/1/

我知道这不是您所提问题的完整答案，但它显示了我会使用的基本原理。

祝你好运，欢迎来到stackoverflow！

Answer 2

在您的jQuery代码中，尝试对图像使用attr函数

$(document).ready(function(){
     // Upload
     $(document).on('click', '.showuser', function() {
     $('#iduser').val($(this).data('id'));
     // this part
     $('#userphoto').attr("src"',$(this).data('userphoto'));
   });

});

如何使用jQuery在模态Laravel中为图像src传递数据

2 个答案: