Question

我正在建立一个包含多个div的页面，这些页面包含唯一的图像和标题。每个div中都有一个按钮，当我单击该按钮时，它应该获取唯一的图像和唯一的标题并将其显示在模式中。我的问题是它从每个div抓取所有文本，而仅显示第一个div的图像。 HTML：

<div class="col2">
    <div class="crop">
        <img class="product-image" src="products/IMG_0002.jpg" alt="Generic placeholder image" id="image">
    </div>
    <div class="text-container">
        <a class="product-title" data-toggle="modal" data-target="#myModal" href='#' id="cap"> Title </a>
    </div>
    <p><a class="btn btn-secondary" role="button" id="button1" data-toggle="modal" data-target="#myModal">View details &raquo;</a></p>
</div>

JavaScript：

$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
            var image = $('.crop img').attr('src');
            var caption = $('.text-container a').text();
            $(".img-responsive").attr("src", image);
             $(".caption").text(caption);
        });
});

模式HTML：

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="pull-left">
                        <p class="caption">""</p>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
                </div>
                <div class="modal-body">
                    <img class="img-responsive" src="" />
                    <!--end modal-body-->
                </div>
                <div class="modal-footer">
                </div>
                <div class="pull-left">
                    <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
                    <!--end modal-footer-->
                </div>
                <!--end modal-content-->
            </div>
            <!--end modal-dialoge-->
        </div>
        <!--end myModal-->>
    </div>

提前谢谢！

Answer 1

您将要向选择器添加上下文。没有上下文，您将选择与给定选择器匹配的每个元素。

这是您的代码的修订版，下面是简短的解释：

$('#myModal').on('show.bs.modal', function (e) {
    var sourceTarget = $(e.relatedTarget).closest('.col2')[0]
    var image = $('img.product-image', sourceTarget).attr('src');
    var caption = $('.product-title', sourceTarget).text();
    $('.img-responsive', this).attr('src', image);
    $('.caption', this).text(caption);
});

e.relatedTarget是事件对象传递的触发元素，可让您直接访问刚刚单击的按钮。

使用此相关目标，我们可以遍历树查找.col2（包含），我们将其称为sourceTarget。现在，我们可以获取此sourceTarget元素中包含的任何元素。

this只是在其上执行模式插件的元素上下文（在本例中为#myModal）。

由于您有多个包含唯一数据的<div />元素，会避免对图像和文本使用相同的id属性。

动态模式问题JQuery

1 个答案: