Question

我正在使用HTML5，PHP和JQUERY构建图像库。据我所知，PHP和HTML很好。当用户单击缩略图时，我试图将其加载到模态中，我希望更改模态中的img，因此不必为每个img生成一个。我对JQUERY感到很新鲜，并且一直在全天致力于这项工作。有人可以指出我要去哪里了吗？

我希望将img加载到模式中。然而，当我对其进行测试时，模态会打开，但只会显示损坏的img图标。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('a .thumb').click(function (e) {
        $('#lgImg').attr('src', data-img-url);
    });
</script>

<!-- The Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="lgImg" class="" src="#"/>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>
<a href='#myModal' data-toggle='modal' data-img-url='/images/prod/img1.jpg' class='thumb'><img class='img-thumbnail thumb' src='/images/prod/img1.jpg' width='20%' height='20%'></a>

Answer 1

由于您正在尝试在Bootstrap模态中操作元素，因此最好使用show.bs.modal事件从相应的触发元素中插入图像。

$('#myModal').on('show.bs.modal', function (e) {
  var imgUrl = $(e.relatedTarget).data('imgUrl')
  $('#lgImg').attr('src', imgUrl)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- The Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="lgImg" class="img-fluid" />
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>
<a href='#myModal' data-toggle='modal' data-img-url='https://placeimg.com/640/480/any/grayscale' class='thumb'><img class='img-thumbnail thumb' src='https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg' width='20%' height='20%'></a>

或者，要继续使用您的方法，您可以更改代码以引用来自锚点的数据属性：

$('a .thumb').click(function (e) {
    $('#lgImg').attr('src', $(this).parent().data('imgUrl'));
});

Answer 2

您对data-img-url的属性值的引用不正确。检出.data() jquery method，然后尝试设置您的点击处理程序，如下所示：

$('a .thumb').click(function (e) {            
  $('#lgImg').attr('src', $(this).parent().data('img-url'));
});

Answer 3

注意：您可能想对图像进行样式设置，或者可以看到模态中的img可能以您现在拥有的尺寸过大（假设您没有未包含的CSS）

$('a .thumb').click(function (e) {   
  //You need to reference the clicked thumbnail, then its parent since the a element has the data-img-url you're looking for.
  //An alternative would be to look for the closest a element up the DOM tree using closest.
  //$('#lgImg').attr('src', $(this).closest("a").attr("data-img-url"));  
  $('#lgImg').attr('src', $(this).parent().attr("data-img-url"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- The Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="lgImg" class="" src="#"/>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>
<a href='#myModal' data-toggle='modal' data-img-url='https://placeimg.com/640/480/any/grayscale.jpg' class='thumb'><img class='img-thumbnail thumb' src='https://placeimg.com/640/480/any/grayscale.jpg' width='20%' height='20%'></a>

具有数据属性的jQuery和img画廊不起作用

3 个答案: