Question

在.box内单击.large-box时需要显示较小的图像。我试图添加当前单击图像的图像源。它可以工作，但不能更改为其他图像。

<section class="section-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="large-box">
                    <img src="" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="text">
                    <h4>Robert Toth</h4>

                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla congue elit in fermentum. Aenean efficitur enim ac euismod aliquam.
                    </p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="box"><img src="images/karikatura obrazok.png" alt=""></div>
                    </div>
                    <div class="col-lg-6">
                        <div class="box"><img src="images/karikatura2.png" alt=""></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="box"><img src="images/karikatura3.png" alt=""></div>
                    </div>
                    <div class="col-lg-6">
                        <div class="box"><img src="images/karikatura4.png" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

jQuery

$('.section-5 .box img').each(function() {
    var imgsrc = $('.section-5 .box img').attr('src');

    $('.section-5 .box img').click(function() {
        $('.section-5 .large-box img').attr('src', imgsrc);
    })
})

Answer 1

请查看下面的代码，这是该示例的工作示例

$(document).ready(function(){
  $('.box').click(function(){
    $('.large-box img').attr('src', $('img', this).attr('src'));
  });
});

https://jsbin.com/lazabac/edit?html,js,output

单击显示较大的内部较小的图像

1 个答案: