Question

我正在创建一个带有main: .LFB0: .cfi_startproc pushq %rbp .cfi_def_cfa_offset 16 .cfi_offset 6, -16 movq %rsp, %rbp .cfi_def_cfa_register 6 movq $0, -8(%rbp) movl $0, %eax popq %rbp .cfi_def_cfa 7, 8 ret的简单图库，以便在点击时显示放大的图像。

在我的图库中，每3张图片被分组到一个容器中

asm

JQuery的

overlay

我可以点击下一步获取下一张图片。但我的问题是如何在最后一张图片到达时禁用下一个按钮？。

我无法找到获取最后一张图片的逻辑。

注意：最后一个容器中的图像可能会在1到3之间变化

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

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

Answer 2

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

Answer 3

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

更新了小提琴 -

＆＃13;

$(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 + "')");
	});
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: