将“下一个”和“上一个”按钮添加到jQuery图片库

Question

我用jQuery制作了一个图片库(点击图片，它就会在屏幕上显示得很大)。因此，我想添加一个“下一步”和“上一步”按钮来从视图切换，基本上是在单击时用下一个或上一个图像替换图像高亮显示中的src属性。但这似乎不起作用。

<div class="row">
        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-1.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-2.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-3.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/hand-rose55.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/ROSE-BLACK.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>

        <div class="col-md-2 col-sm-6 test-padding">
            <img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/rose-blgr.jpg" class="img-padding img-highlight" style="width: 100%;"/>
        </div>
    </div>
        <div class="photo-size">
            <a href="#" class="close">CLOSE</a>
            <div class="image-viewer"></div>
            <a href="#" class="next">NEXT</a>
            <a href="#" class="prev">PREV</a>
           </div>

我甚至不确定next函数是否处于覆盖数据的正确位置：

$( document ).ready(function() {
    $('.img-highlight').click(function () {
        const el = $(".photo-size");
        el.css("display", "block");
        var src = $(this).attr('src');
        const block = $(".image-viewer");
        $(this).clone().appendTo(block).attr('src', src).addClass('highlighted-img');
        $('.next').click(function(ev){
            ev.preventDefault();
            var src = $(this).parent().next().find('img').attr('src');
            alert(src);
        });
    });

    $('.close').click(function (ev) {
        ev.preventDefault();
        $('.image-viewer').empty()
        $(".photo-size").css("display", "none");
    });

});

Answer 1

这个怎么样？我终于让上一步和下一步按钮工作了。

    [https://codepen.io/newschapmj1/pen/WNbZOYy][1]
  $(document).ready(function () {
      //newimg1 - temp copy of img1
      var img1, newimg1;
      const block = $(".image-viewer");

      $('.img-highlight').click(function () {
        const el = $(".photo-size");
        el.css("display", "block");

        //$('div.newgallery').empty();  //empty destination
        img1 = $(this);
        console.log('click img1', img1);

        var src = $(this).attr('src');

        $(this).clone().appendTo(block).attr('src', src).addClass('highlighted-img');
      });

      $('.next').click(function (ev) {

        ev.preventDefault();

        newimg1 = $(img1).parent().next().children();

        if (newimg1.length > 0) {
          // image found
          $(block.empty());
          $(newimg1).clone().appendTo(block);

          $(block).addClass('highlighted-img');
          img1 = newimg1;
        }
        else {
          //no image - so do nothing
        }

      });

      $('.prev').click(function (ev) {

        ev.preventDefault();

        newimg1 = $(img1).parent().prev().children();

        if (newimg1.length > 0) {
          // image found
          $(block.empty());
          $(newimg1).clone().appendTo(block);

          $(block).addClass('highlighted-img');
          img1 = newimg1;
        }
        else {
          //no image - so do nothing
        }

      });


      $('.close').click(function (ev) {
        ev.preventDefault();

        $(block).removeClass('highlighted-img');
        $(block.empty());

        $(".photo-size").css("display", "none");
        img1 = null;
        newimg1 = null;

      });

    });