Как я могу остановить случайную функцию от размещения случайных элементов друг над другом? - PullRequest
0 голосов
/ 13 июля 2020

У меня есть сетка из 10 на 10 квадратов, и я использую случайную функцию, чтобы назначать классы квадратам, чтобы дать некоторым из них разные классы / изображения при загрузке.

$.fn.random = function() {
  var n = this.eq(Math.floor(Math.random() * this.length));
  // window.alert(this.eq(Math.floor(Math.random() * this.length)));
  return n;
}
$('a').random().addClass("snowman");

У меня их 16 случайные назначения.

Чаще всего некоторые случайные изображения накладываются друг на друга и поэтому становятся скрытыми. Я подумал об удалении всех классов случайной части, а затем о добавлении класса ('X'), например,

$('a').random().removeClass().addClass("snowman");

, но это не сработало.

Есть какие-нибудь легкие как это сделать?

Ответы [ 2 ]

1 голос
/ 13 июля 2020

Я бы предложил l oop для каждого a и назначить class случайным образом.

У вас может быть один массив, например classArray, который содержит все ваши 16 классы, как вы упомянутые в question.

Затем l oop поверх каждого a с $('a').each((i, item) и используйте randomClass. Здесь я выбрал class из random index.

Если вам нужно немного из a осталось unassigned, используйте * 2 здесь Math.floor(Math.random() * classArray.length * 2);. Если вы хотите, чтобы каждый a должен был назначать class, удалите из него * 2.

Попробуйте это ниже.

let classArray = ['red', 'green', 'blue'];

$.fn.randomClass = function() {
  let n = Math.floor(Math.random() * classArray.length * 2);
  if (n < classArray.length) {
    this.addClass(classArray[n]);
  }  
}

$('a').each((i, item) => $(item).randomClass());
div.cell {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border: 1px solid;
}

.red {
  background-color: red;
  width: 100%;
}
.green {
  background-color: green;
  width: 100%;
}
.blue {
  background-color: blue;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div>
  <div class='cell'><a href='#'>  </a></div>
  <div class='cell'><a href='#'>  </a></div>
  <div class='cell'><a href='#'>  </a></div>
</div>
<div>
  <div class='cell'><a href='#'></a></div>
  <div class='cell'><a href='#'></a></div>
  <div class='cell'><a href='#'></a></div>
</div>
<div>
  <div class='cell'><a href='#'></a></div>
  <div class='cell'><a href='#'></a></div>
  <div class='cell'><a href='#'></a></div>
</div>
1 голос
/ 13 июля 2020

Чтобы отменить выбор одного и того же элемента дважды, примените следующую стратегию:

Получите все элементы, перемешайте их, а затем возьмите 16 первых из этой перемешанной коллекции. Затем примените стили / изображения, как вы sh для этих 16.

Чтобы реализовать саму перетасовку массива, вы можете «одолжить» эффективную реализацию из здесь

Вот простой способ сделать это:

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = a[i];
        a[i] = a[j];
        a[j] = temp;
    }
    return a;
}

$.fn.filterRandom = function (count) {
    return $(shuffle(this.get()).slice(0, count));
}

// Clear styling, and choose 16 TD elements from the table
//    and reapply styling:
$("td").removeClass().filterRandom(16).addClass("yellow");
table { border-collapse: collapse }
td { border: 1px solid; width: 15px; height: 15px }
.yellow { background: yellow }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

Если теперь у вас разные классы CSS, то вы можете просто расширить его следующим образом:

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = a[i];
        a[i] = a[j];
        a[j] = temp;
    }
    return a;
}

function pickRandom(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

$.fn.filterRandom = function (count) {
    return $(shuffle(this.get()).slice(0, count));
}

// Clear styling, and choose 16 TD elements from the table
//    and reapply styling, choosing a class randomly for each:
$("td").removeClass().filterRandom(16).each(function () {
    $(this).addClass(pickRandom(["red","yellow","blue"]));
});
table { border-collapse: collapse }
td { border: 1px solid; width: 15px; height: 15px }
.yellow { background: yellow }
.blue { background: blue }
.red { background: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...