Jquery 单击时在较大的图像中显示较小的图像

需要在单击

.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>

---

请看下面的代码，这里是这个工作的例子

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

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