javascript - 从外部 div 单击时的 Jquery 和 Javascript 滚动图像

Question

我有一个我构建的灯箱，您可以在带有图像的 div 上创建该灯箱，然后在新的 div 中使用灯箱效果打开更大的图像。我想要箭头，您可以在其中单击以向前和向后滚动浏览其他外部 div 中的图像。我是 JQuery 和 javascript 的新手，我已经尝试了所有我能想到的方法，但我只是缺少一些关于如何让它工作的东西。我附上了我的代码的基础知识作为引用。

high 和 show 代码也不起作用，因为它出于某种原因没有检测到其他 div。

$(document).ready(function() {
	$("img").click(function(){
		$src=$(this).attr("src");
		$title=$(this).attr("title");
		$alt=$(this).attr("alt");


if(!$("#lightbox").length>0){
			$('body').append("<div id='lightbox'><span class='closer'>X</span><span class='nextimg'>></span><span class='previmg'><</span><div class='lightbox_container'><img src='' title='' alt=''><p>" + $title + "</p></div></div>");
			

			$("#lightbox").show();
			
			
			
			
			//*********************************************************
			if(!$(this).parent("#lightboxsm img").next().length>0){
				$(".nextimg").show();
			} else {
				$(".nextimg").hide();
			};
			
			$("body").on('click','.nextimg',function(){
				$newsrc=$("#lightbox img").attr("src");
				$newtitle=$("#lightbox img").attr("title");
				$newalt=$("#lightbox img").attr("alt");
				
				
				$("#lightboxsm img").next("lightbox img").attr('src', $newsrc);
				
			});
			
			//*********************************************************
  
  }else{
			$("#lightbox img").attr("src",$src);
			$("#lightbox img").attr("alt",$alt);
			$("#lightbox img").attr("title",$title);
			$("#lightbox").show();
		}
	});
	
	
	//Closes the lightbox***************************************
	$("body").on('click', '#lightbox .closer',function(){
		$("#lightbox").hide();
	})
    
    });

.lightboxsm {
	width: 175px;
    height: 175px;
    overflow: hidden;
	/*float:left;*/
	display:inline-block;
	padding:10px;
	position:relative;
	cursor:pointer;
}

.lightboxsm img{
	width:auto;
    height: 175px;
	object-fit: cover;
}

#lightbox{
	position:fixed;
	height:100%;
	width:100%;
	background: rgba(0, 0, 0, 0.5);
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:200;
}

#lightbox img{
	max-width:80%;
	max-height:80%;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}

.closer {
	display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
	float:right;
	margin:5% 10%;
	z-index:250;
}

.closer:hover {
	cursor:pointer;
}

.nextimg {
	display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
	float:right;
	margin:5% 10%;
	z-index:600;
	clear:right;
}

.nextimg:hover {
	cursor:pointer;
}

.previmg {
	display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
	float:left;
	margin:5% 10%;
	z-index:600;
	clear:left;
}

.previmg:hover {
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lightbox_container">
            <div class="lightboxsm" id="img1">
                <img src="http://2017.sunkissed-villas.com/images/1.png" alt="1"/>
            </div>
        
            <div class="lightboxsm" id="img2">
                <img src="http://2017.sunkissed-villas.com/images/2.png" alt="2"/>
            </div>
            
            <div class="lightboxsm" id="img3">
                <img src="http://2017.sunkissed-villas.com/images/3.png"/>
            </div>
            
        </div>

Answer 1

问题是 nextimg 选择器在获取 next() 之前没有访问父元素，因此没有下一个元素。让我知道更新后的代码段是否有效。我还做了它，以便在没有下一张或上一张图像时隐藏下一张/上一张按钮。

$(document).ready(function() {
  $("img").click(function(){
    $(this).addClass('selected')
    $src=$(this).attr("src");
    $title=$(this).attr("title");
    $alt=$(this).attr("alt");


    if(!$("#lightbox").length > 0){
      $('body').append("<div id='lightbox'><span class='closer'>X</span><span class='nextimg'>></span><span class='previmg'><</span><div class='lightbox_container'><img src='' title='' alt=''><p>" + $title + "</p></div></div>");
    			
      $("body").on('click','.nextimg',function(){
        $newimg=$('.selected').parent().next().find('img')
        $('.selected').removeClass('selected')
        $newimg.addClass('selected')
    	$("#lightbox img").attr("src", $newimg.attr("src"));
        checkPrevNext();
      });
      
      $("body").on('click','.previmg',function(){
        $newimg=$('.selected').parent().prev().find('img')
        $('.selected').removeClass('selected')
        $newimg.addClass('selected')
    	$("#lightbox img").attr("src", $newimg.attr("src"));
        checkPrevNext();
      });
    }
      $("#lightbox").show();
      $("#lightbox img").attr("src",$src);
      $("#lightbox img").attr("alt",$alt);
      $("#lightbox img").attr("title",$title);
      checkPrevNext();
   });
    	
  $("body").on('click', '#lightbox .closer',function(){
    $("#lightbox").hide();
  })
  
  function checkPrevNext() {
    if($('.selected').parent().next().find('img').length > 0) {
      $(".nextimg").show();
    } else {
      $(".nextimg").hide();
    };
    
    if($('.selected').parent().prev().find('img').length > 0) {
      $(".previmg").show();
    } else {
      $(".previmg").hide();
    };
  }
});

.lightboxsm {
	width: 175px;
    height: 175px;
    overflow: hidden;
	/*float:left;*/
	display:inline-block;
	padding:10px;
	position:relative;
	cursor:pointer;
}

.lightboxsm img{
	width:auto;
    height: 175px;
	object-fit: cover;
}

#lightbox{
	position:fixed;
	height:100%;
	width:100%;
	background: rgba(0, 0, 0, 0.5);
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:200;
}

#lightbox img{
	max-width:80%;
	max-height:80%;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}

.closer {
	display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
	float:right;
	margin:5% 10%;
	z-index:250;
}

.closer:hover {
	cursor:pointer;
}

.nextimg {
	display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
	float:right;
	margin:5% 10%;
	z-index:600;
	clear:right;
}

.nextimg:hover {
	cursor:pointer;
}

.previmg {
	display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
	float:left;
	margin:5% 10%;
	z-index:600;
	clear:left;
}

.previmg:hover {
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lightbox_container">
  <div class="lightboxsm" id="img1">
    <img src="http://2017.sunkissed-villas.com/images/1.png" alt="1"/>
  </div>
        
  <div class="lightboxsm" id="img2">
    <img src="http://2017.sunkissed-villas.com/images/2.png" alt="2"/>
  </div>
            
  <div class="lightboxsm" id="img3">
    <img src="http://2017.sunkissed-villas.com/images/3.png"/>
  </div>            
</div>