Question

我有这个骰子数组改变了网格库中的attribues（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>

Answer 2

首先随机创建一个骰子编号范围;然后从中弹出。

function generateRandomDiceNumbers () {
    // return array of 6 numbers pushed randomly
}

function getRandomDiceRoll (diceNumbers) {
    // use diceNumbers.pop()
}

一个简单的实现：

function getRandomArbitrary(min, max) {
  // from mdn
  return Math.random() * (max - min) + min;
}

function getRandomDiceNumbers() {
  let numbers = [];
  while(numbers.length < 6){
    let r = Math.floor(getRandomArbitrary(1, 7));
    if(!numbers.includes(r)) {
      numbers.push(r);
    }
  }
  return numbers
}

var randomDiceNumbers = getRandomDiceNumbers();
function getNextRandomDiceNumber(numbers) {
  if(numbers.length > 0) {
    return numbers.pop();
  }
}

// use getNextRandomDiceNumber(randomDiceNumbers);

希望这就是你要找的东西。

Answer 3

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

    var used = [];

    function setNum() {
        var num = Math.floor(Math.random() * dice.length);
        if (used.includes(num)) {
           setNum(); // invokes itself if a used number is detected
        }
        used.push(num); // send new unused value to used array for next check

        $(this).fadeOut(200, function () {
            $(this).attr('srcset', dice[num]);
        }).fadeIn(200);
    };

    $('.attachment-lenslight_squares')
    .click(function () {
        setNum(); //set random number / invoke sequence on click
    });

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

我没有对此进行过测试，但是..你基本上只需要对现有代码添加递归检查。

使随机骰子数组返回唯一的attributres /防止重复

3 个答案: