到达最后一个元素时隐藏下一步按钮

hide next button when last element reaches

本文关键字：隐藏 下一步 按钮 元素 最后一个      更新时间：2023-09-26

我正在创建一个带有overlay的简单图库，以便在单击时显示放大的图像。

在我的画廊中，每 3 张图像被分组到一个容器中为

<div class='overlay'>
  <a class='next control'>Next</a>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image1"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image2" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image3"/>
    </div>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image4"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image5" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image6"/>
    </div>
</div>

杰奎里

$(document).ready(function () {
    var src;
    var currentElement;
    $(".image").click(function () {
        currentElement = $(this);
        src = $(currentElement).find("img").attr("src");
        $(".overlay").css("background-image", "url('" + src + "')");
        $(".overlay").show();
    });
    $(".next").click(function () {
        if ($(currentElement).next().length) {
            currentElement = currentElement.next();
            src = $(currentElement).find("img").attr("src");
        }
        else {
            currentElement = $(currentElement).parent().next().find(".image:first");
            src = $(currentElement).find("img").attr("src");
        }
        $(".overlay").css("background-image", "url('" + src + "')");
    });
});

我能够在单击下一步时获得下一个图像。但我的问题是如何在最后一个图像到达时禁用下一个按钮？

我找不到获取最后一个图像的逻辑。

注意：最后一个容器中的图像可能从 1 到 3 不等

这是演示： https://jsfiddle.net/y5fwgz25/1/

这是我的解决方案，但我不喜欢这段代码，但工作正常

<div class='overlay'>
  <a class='next'></a>
</div>
<div id="gallery">
<div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image1"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image2" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image3"/>
    </div>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image4"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image5" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image6"/>
    </div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
  var src;
  var currentElement;
  var last_img = $("#gallery .container:last-child .image:last-child");
  $(".image").click(function () {
    currentElement = $(this);
    src = $(currentElement).find("img").attr("src");
    $(".overlay").css("background-image", "url('" + src + "')");
    $(".overlay").show();
    if ( $(currentElement)[0] == $(last_img)[0] ) {
      $(".overlay .next").hide();
    }
  });

  $(".next").click(function () {
    if ( $(currentElement).next()[0] == $(last_img)[0] ) {
      $(".overlay .next").hide();
    }
    if ($(currentElement).next().length) {
      currentElement = currentElement.next();
      src = $(currentElement).find("img").attr("src");
    }else {
      currentElement = $(currentElement).parent().next().find(".image:first");
      src = $(currentElement).find("img").attr("src");
    }

    $(".overlay").css("background-image", "url('" + src + "')");
  });
});
</script>

为什么不使用jQuery last方法获取最后一个同级，并将其任何属性与当前元素的相同属性进行比较。如果它们相同，请隐藏或禁用"下一步"按钮。

您可以添加一个if条件。如果currentElement的长度为零，则隐藏.next。

更新的小提琴- 

$(document).ready(function () {
	var src;
	var currentElement;
	$(".image").click(function () {
		currentElement = $(this);
		src = $(currentElement).find("img").attr("src");
		$(".overlay").css("background-image", "url('" + src + "')");
		$(".overlay").show();
	});
	$(".next").click(function () {
		if ($(currentElement).next().length) {
			currentElement = currentElement.next();
			src = $(currentElement).find("img").attr("src");
		}
		else {
			currentElement = $(currentElement).parent().next().find(".image:first");
			src = $(currentElement).find("img").attr("src");
		}
    if($(currentElement).length==0) {
        $(".next").hide();
    }
		$(".overlay").css("background-image", "url('" + src + "')");
	});
});
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9) no-repeat;
    background-position: center;
}
.next {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    background-image: url("http://dummyimage.com/50&text=Next");
    right: 8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay'>
  <a class='next'></a>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image1"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image2" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image3"/>
    </div>
</div>
  <div class="container">
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image4"/>
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image5" />
    </div>
    <div class="image">
      <img src="http://dummyimage.com/100&text=Image6"/>
    </div>
</div>

相关文章：