jquery - 使随机骰子数组返回唯一属性/防止重复

Question

我有一个骰子数组，可以更改网格库中的属性(srcset)，我需要它显示唯一的属性，直到它用完然后重新开始，这样我就不会在网格中看到相同图像的 2,3,4。感谢您的帮助

这是 jQuery:

$(function() {
    //array
    var dice = $('.attachment-lenslight_squares').map(function() {
        return $(this).attr('srcset')
    }).get();

    $('.attachment-lenslight_squares')
        .click(function() {
            var num = Math.floor(Math.random() * dice.length);
            $(this).fadeOut(200, function() {
                $(this).attr('srcset', dice[num]);
            }).fadeIn(200);
        });

    setInterval(function() {
        var rand = Math.floor(Math.random() * 15);
        $('.attachment-lenslight_squares').eq(rand).click();
    }, 3000);

});

感谢您的想法

Answer 1

您可以使用.not()、解构赋值、.html()来交换元素

var items = $(".items").on("click", "div", function() {
  $(this).fadeOut(200, function() {
    var not = $.map($(".items div").not(this), function(el) {
      return $(el).index(".items div")
    });
    var next = not[Math.floor(Math.random() * not.length)];
    var index = $(this).index(".items div");
    var elems = $(">div", items).toArray();
    [elems[next], elems[index]] = [elems[index], elems[next]];
    items.html(elems).find(this).fadeIn(200)
  });
});

var interval = setInterval(function() {
  items.find("div")
    .eq(Math.floor(Math.random() * items.find("div").length))
    .click()
}, 3000)

.items div {
  width: 25px;
  height: 25px;
  padding: 4px;
  margin: 1px;
  border: 2px solid #000;
  border-radius: 20%;
  text-align: center;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>
<div class="items">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>