Question

我希望JS功能能够首次点击按钮显示位于容器内的图像＆＃34; myDIV1＆＃34;然后第二次点击显示＆＃34; myDIV2＆＃34;然后第三次单击显示＆＃34; myDIV3＆＃34;中的图像。和儿子一直等到＃34; myDIV76。＆＃34;我对javascript并不擅长，这就是我来这里寻求帮助的原因。 myDIV显示器内的所有图像都设置为＆＃34; none＆＃34;我希望能够将它们设置为＆＃34; blocks＆＃34;但唯一让我挣扎的是让按钮显示每个DIV，同时保留所有之前添加的DIV（就像一个＆＃34;加载更多图像＆＃34;像youtube一样的按钮位于页面底部。）

Answer 1

为按钮添加一个单击处理程序，设置一个计数器，该计数器使用计数器的值来显示相应的div，并在点击时递增计数器。

var count = 1;
document.getElementById('button').addEventListener('click',function() {
  var target = document.getElementById('div'+count)
  target && target.classList.remove('hidden');
  count++;
})

.hidden {display:none;}

<button id="button">click</button>

<div id="div1" class="hidden">div1</div>
<div id="div2" class="hidden">div2</div>
<div id="div3" class="hidden">div3</div>
<div id="div4" class="hidden">div4</div>
<div id="div5" class="hidden">div5</div>

Answer 2

这里很少，

在课程showmore的按钮上添加点击事件：$(".showmore").on("click", function() {...}
由于hiddenImg是一个要隐藏css的类，我们可以使用var imgArr = $(".hiddenImg").first();查找仍然是hidden的img的第一个div。然后，如果我们找到一个隐藏的img，我们删除隐藏的类hiddenImg，img变得可见。

if(imgArr.length > 0){ imgArr.removeClass("hiddenImg"); }
每次点击按钮，它都会找到下一个隐藏的图像并显示它，直到你找不到为止，通过这样做，无论你有多少图像，都不需要更新js代码

$(document).ready(function() {
  $(".showmore").on("click", function() {
	var imgArr = $(".hiddenImg").first();

	if(imgArr.length > 0){
		imgArr.removeClass("hiddenImg");
	}
  });
});

.showmore {
  left: 250px;
  position: fixed;
}

.hiddenImg {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showmore">show more</button>
<div id="myDIV2" class="hiddenImg">img 2<img src="http://lorempixel.com/200/100" /></div>
<div id="myDIV3" class="hiddenImg">img 3<img src="http://lorempixel.com/200/100" /></div>
<div id="myDIV4" class="hiddenImg">img 4<img src="http://lorempixel.com/200/100" /></div>
<div id="myDIV5" class="hiddenImg">img 5<img src="http://lorempixel.com/200/100" /></div>
<div id="myDIV6" class="hiddenImg">img 6<img src="http://lorempixel.com/200/100" /></div>
<div id="myDIV7" class="hiddenImg">img 7<img src="http://lorempixel.com/200/100" /></div>

如何创建一个JavaScript函数，每次单击按钮时显示NEW div中包含的元素？

2 个答案: