Question

我尝试使用data-attribute将图像从php foreach循环加载到bootstrap模式中，但在目标div中没有显示 - 这是我的代码：

<script>

$(document).ready(function(){

  $( ".subscribe" ).on( "click", function() {
  var imgURL = $( this ).attr( "data-img-url" );
  console.log(imgURL);
});


$( "#subscribeModal" ).on('shown', function(){
  $('#sub_img').append('<img src="'+imgURL+'" />');
 });
});

</script>

Answer 1

你有2个问题。首先是其他地方提到的imgURL参数。其次，要绑定的事件的名称应为shown.bs.modal。 Bootstrap website上的文档说：

show.bs.modal 调用show实例方法时会立即触发此事件。如果由单击引起，则单击的元素可用作事件的relatedTarget属性。

$( "#subscribeModal" ).on('shown.bs.modal', function(){
  $('#sub_img').append('<img src="'+imgURL+'" />');
 });
});

Answer 2

变量imgURL是点击处理程序的本地变量，因此无法在shown处理程序中访问它。在这两个函数的共享范围内声明变量以使其工作

$(document).ready(function () {
    var imgURL;
    $(".subscribe").on("click", function () {
        imgURL = $(this).attr("data-img-url");
        console.log(imgURL);
    });


    $("#subscribeModal").on('shown', function () {
        $('#sub_img').append('<img src="' + imgURL + '" />');
    });
});

将html附加到bootstrap模式不起作用

2 个答案: