Question

我希望能够点击一系列按钮，一旦点击全部按钮，就会显示div标签元素。我已经在这里尝试了几个其他线程，但没有成功并让代码工作。任何帮助都将被感激地接受。如果这是闪光我就做得很好。 #learningnewskills

<button class="w3-button" onclick="plusDivs">one of five</button>
<button class="w3-button" onclick="plusDivs">two of five</button>
<button class="w3-button" onclick="plusDivs">three of five</button>
<button class="w3-button" onclick="plusDivs">four of five</button>
<button class="w3-button" onclick="plusDivs">five of five</button>

The following div tag is hidden by default and revealed when all five buttons are clicked...

<div class="hidden-until-all-clicked">You clicked all five buttons</div>

Answer 1

以下是使用jQuery的一种方法：

$('.w3-button').on('click', function() {
    $(this).addClass('clicked');

    // Check to see if all the .w3-button elements are 'clicked'
    if ($('.w3-button:not(".clicked")').length == 0) {
        $('.hidden-until-all-clicked').show();
    }
});

希望这适合你。

干杯

Answer 2

您必须在变量中保存每个元素的点击次数

var button = document.getElementsByClassName("w3-button"),
    hidden = document.getElementsByClassName("hidden-until-all-clicked")[0],
    len = button.length,
    count = 0,
    i;
function click(){
  count += 1;
  if(count == len){
    hidden.style.display="block";
  }
  this.removeEventListener("click", click);
}
for(i=0;i<len;i+=1){
  button[i].addEventListener("click", click);
}

.hidden-until-all-clicked{
  display: none;
}

<button class="w3-button">one of five</button>
<button class="w3-button">two of five</button>
<button class="w3-button">three of five</button>
<button class="w3-button">four of five</button>
<button class="w3-button">five of five</button>

<p>The following div tag is hidden by default and revealed when all five buttons are clicked...</p>

<div class="hidden-until-all-clicked">You clicked all five buttons</div>

Answer 3

试试这个：

var sum = 0;
for (var i = 0; i < 5; i++) {
  $("#" + i + "b").click(function() {
    if ($("#" + this.id).attr('class') != "noclick") {
      sum++;
      $("#" + this.id).attr('class', 'noclick');
    }
    if (sum == 5) {
      $("#hid").show();
    }
  });
}

https://jsfiddle.net/qnb058k5/

点击多个按钮会显示div标签

3 个答案: