每頁隨機顯示最多3個區塊

我有幾個圓圈形式的塊。

我這樣做是為了當您單擊該塊時，它會溶解。但是，如果您解散所有塊，則該頁面將保持空白。

如何使頁面上最多有 3 個隨機選擇的塊？此外，頁面永遠不會是空白的。

要選擇 3 個隨機我使用

var randomnumber = Math.floor(Math.random()*10)   1;
var circle1 = $('#circle'   randomnumber);
var circle2 = $('#circle'   randomnumber);
var circle3 = $('#circle'   randomnumber);

但我無法隱藏所有內容，仍然顯示 3 個選定的內容。此外，當我們單擊其中一個并消失時，應該會出現一個新的

我嘗試visibility: hidden;像這樣在腳本中設定所有塊的樣式，var circle1 = $('#circle' randomnumber).css('visibility', 'visible');但最終什么都沒有出現。

$("div").click(function() {
  $(this).fadeOut("slow");
});

const nodes = document.querySelectorAll('.animation');
for(let i = 0; i < nodes.length; i  ) {
  nodes[i].addEventListener('click', (event) => {
    event.target.style.animation = 'Animation 200ms linear';
    setTimeout(() => {
      event.target.style.animation = '';
    }, 220);  });
}

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle1 {
  background: #456BD9;
}
.circle2 {
  background: #fb6df9;
}
.circle3 {
  background: #6de2fb;
}
.circle4 {
  background: #81fb6d;
}
.circle5 {
  background: #e9fb6d;
}
.circle6 {
  background: #6bfc90;
}
.circle7 {
  background: #a5950a;
}
.circle8 {
  background: #a50a74;
}
.circle9 {
  background: #ff0c00;
}
.circle10 {
  background: #06aec2;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="circle circle1 animation"></div>
<div class="circle circle2 animation"></div>
<div class="circle circle3 animation"></div>
<div class="circle circle4 animation"></div>
<div class="circle circle5 animation"></div>
<div class="circle circle6 animation"></div>
<div class="circle circle7 animation"></div>
<div class="circle circle8 animation"></div>
<div class="circle circle9 animation"></div>
<div class="circle circle10 animation"></div>

uj5u.com熱心網友回復：

要僅顯示 3 個圓圈，您需要記住您擁有的 3 個圓圈。您可以使用 3 個變數并將新值與每個變數進行比較，但更容易使用陣列 - 這也為您提供了靈活性，以防您將來想要 4 或 5 個 - 只需更改計數器即可。

var rlist = [];
for (var i = 0; i < 3;   i) {
  var r;
  while (rlist.includes(r = Math.floor(Math.random() * 9)   1))
    ;
  rlist.push(r);
}

這使用了一個“empty while”，它只需要添加兩次 r=Math.floor 代碼（在它之前while和里面）

然后您可以使用該陣列來顯示圓圈

rlist.forEach(r => $('.circle'   r).show());

單擊并顯示一個新的以相同的方式作業，但這次您想用剛剛單擊的那個來更新陣列。您可以決議 classList 并找到您的 circleN，但只需data-在每個圓上添加一個屬性并讀取它就更容易了。

var this_r = $(this).data("circle");
rlist[rlist.indexOf(this_r)] = r;    

最后（未要求），您可以使用$('.circle' r).appendTo(".wrapper")將要顯示的圓圈移動到最后 - 這意味著新顯示的圓圈始終是最后一個，而不是有時在您單擊的那個之后，有時在之后。您可以改為使用$('.circle' r).insertAfter(this)它，它將始終替換剛剛單擊的那個。

更新片段：

$(".circle").hide();

var rlist = [];
for (var i = 0; i < 3;   i) {
  var r;
  while (rlist.includes(r = Math.floor(Math.random() * 9)   1))
    ;
  rlist.push(r);
}

rlist.forEach(r => $('.circle'   r).show());


$(".circle").click(function() {
  $(this).fadeOut("slow", function() {
    var r;
    // can assume "this" circle is already in rlist, so don't need to handle it differently
    while (rlist.includes(r = Math.floor(Math.random() * 9)   1))
        ;

    // remove this_r from the list and and next_r
    var this_r = $(this).data("circle");
    rlist[rlist.indexOf(this_r)] = r;

    // move to the end and show
    $('.circle'   r).insertAfter(this).show();
  });
});

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle1 {
  background: #456BD9;
}

.circle2 {
  background: #fb6df9;
}

.circle3 {
  background: #6de2fb;
}

.circle4 {
  background: #81fb6d;
}

.circle5 {
  background: #e9fb6d;
}

.circle6 {
  background: #6bfc90;
}

.circle7 {
  background: #a5950a;
}

.circle8 {
  background: #a50a74;
}

.circle9 {
  background: #ff0c00;
}

.circle10 {
  background: #06aec2;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrapper'>
  <div class="circle circle1 animation" data-circle="1"></div>
  <div class="circle circle2 animation" data-circle="2"></div>
  <div class="circle circle3 animation" data-circle="3"></div>
  <div class="circle circle4 animation" data-circle="4"></div>
  <div class="circle circle5 animation" data-circle="5"></div>
  <div class="circle circle6 animation" data-circle="6"></div>
  <div class="circle circle7 animation" data-circle="7"></div>
  <div class="circle circle8 animation" data-circle="8"></div>
  <div class="circle circle9 animation" data-circle="9"></div>
  <div class="circle circle10 animation" data-circle="10"></div>
</div>

標籤：javascript html jQuery css

上一篇：jQueryUIRangeSlider，在更改事件之前或在不更改的情況下獲取值？

下一篇：如何在選擇之后或之前隱藏選擇選項？