Установить случайный фон для элементов списка Javascript - PullRequest
Новая
       6

Установить случайный фон для элементов списка Javascript

0 голосов
/ 19 января 2020

Я пытаюсь сделать случайный фон для списка, где у меня есть следующая структура: 

<ul id="grid" class="clear">
    <li>
        <div class="hexagon"></div>
    </li>
    <li>
        <div class="hexagon"></div>
    </li>
    <li>
        <div class="hexagon"></div>
    </li>
    ...

Проблема в том, что он дает одинаковый случайный фон для всех изображений, поэтому все они выглядят то же. javascript, обрабатывающий эту функцию, выглядит следующим образом: 

var bgz = ['bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg']

$(this).find("#grid li .hexagon").each(function() { $('.hexagon').css({'background-image': 'url(images/' + bgz[Math.floor(Math.random() *      bgz.length)] + ')'}) })

Есть идеи, как мне это исправить, чтобы у каждого шестиугольника был свой фон?

А также, есть ли идеи о том, как сделать так, чтобы фоны менялись снова случайным образом каждые x секунд, вместо того, чтобы обновлять sh, чтобы они меняли фоны, пока страница уже загружена?

Ответы [ 2 ]

0 голосов
/ 19 января 2020

Убедитесь, что вы ждете, пока документ не загрузится с $(document).ready, прежде чем выполнить это, иначе элементы, которые вы пытаетесь стилизовать, еще не будут существовать. Затем в вашем each l oop см. $(this) вместо $(".hexagon"), так что вы ссылаетесь только на текущий шестиугольник вместо всех них. Если вам все равно, имеют ли некоторые шестиугольники одинаковое фоновое изображение, вы сделаете следующее: 

var bgz = ['http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg2.png', 'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg3.png', 'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg4.png', 'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg5.png'];

$(document).ready(function() {
  $("#grid li .hexagon").each(function() {
    $(this).css({backgroundImage: "url('" + rando(bgz).value + "')"});
  });
});
.hexagon {
  height: 40px;
  width: 40px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://randojs.com/1.0.0.js"></script>
<ul id="grid" class="clear">
  <li>
    <div class="hexagon"></div>
  </li>
  <li>
    <div class="hexagon"></div>
  </li>
  <li>
    <div class="hexagon"></div>
  </li>
  <li>
    <div class="hexagon"></div>
  </li>
</ul>

Если вы хотите, чтобы все они были уникальными (если вы предоставили достаточно изображений, чтобы это было возможно), вы должны создать перемешанный массив изображений и переберите их - добавьте перемешанный массив, если у вас закончились: 

var bgz = ['http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg2.png', 'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg3.png', 'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg4.png', 'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg5.png'];

$(document).ready(function() {
  var sequence = randoSequence(bgz);
  $("#grid li .hexagon").each(function(i) {
    $(this).css({backgroundImage: "url('" + sequence.pop().value + "')"});
    if(sequence.length == 0) sequence = randoSequence(bgz);
  });
});
.hexagon {
  height: 40px;
  width: 40px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://randojs.com/1.0.0.js"></script>
<ul id="grid" class="clear">
  <li>
    <div class="hexagon"></div>
  </li>
  <li>
    <div class="hexagon"></div>
  </li>
  <li>
    <div class="hexagon"></div>
  </li>
  <li>
    <div class="hexagon"></div>
  </li>
</ul>

Я использовал rando js .com для этих ответов, чтобы упростить случайность и сделать ее более читаемой. rando(myArray).value получает случайное значение из массива, а var sequence = randoSequence(myArray) создает перетасованную версию массива, в которой вы можете получить доступ к значениям через .value - например, sequence[0].value. Проверьте сайт, если вам нужно больше объяснений. Если вы хотите использовать мой код, просто импортируйте rando js, как если бы вы импортировали jQuery, используя этот тег скрипта: 

<script src="https://randojs.com/1.0.0.js"></script>
0 голосов
/ 19 января 2020

Измените класс 'hexagon' на 'this', как показано ниже 

$(this).find("#grid li .hexagon").each(function() { 

  $(this').css({'background-image': 'url(images/' + bgz[Math.floor(Math.random() *      
  bgz.length)] + ')'}) // it will attach your css into the current div for each loop.

})

Не такой, как этот, который будет применять ваш css ко всем вашим div с классом 'hexagon' даже если ваш l oop в миллионах. 

$(this).find("#grid li .hexagon").each(function() { $('.hexagon').css({'background-image': 'url(images/' + bgz[Math.floor(Math.random() *      bgz.length)] + ')'}) })
...