Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Рандомный вывод блоков (https://javascript.ru/forum/dom-window/71729-randomnyjj-vyvod-blokov.html)

LADYX 08.12.2017 22:50
Рандомный вывод блоков
 
Здравствуйте! Если выводить меньше блоков, чем есть всего, то ротация работает. Если выводить все блоки, тогда ротации нет. Помогите, пожалуйста, исправить ошибки. Спасибо!
$(function() {
  var n = 5,
      divs = $('#elements div'),
      div;

  divs.sort(function (a, b) {return Math.random() - 0.5;});

  for (var i=0; i < n; ++i) {
      divs.eq(i).show();
  }
});


<style>#elements div {
  display: none;
}</style>
<div id="elements">
  <div id="container-1">
    Текст 1
  </div>
  <div id="container-2">
    Текст 2
  </div>
  <div id="container-3">
    Текст 3
  </div>
  <div id="container-4">
    Текст 4
  </div>
  <div id="container-5">
    Текст 5
  </div>
</div>

Vlasenko Fedor 09.12.2017 01:45 
<style>#elements div {
  display: none;
}</style>
<div id="elements">
  <div id="container-1">
    Текст 1
  </div>
  <div id="container-2">
    Текст 2
  </div>
  <div id="container-3">
    Текст 3
  </div>
  <div id="container-4">
    Текст 4
  </div>
  <div id="container-5">
    Текст 5
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>$('#elements div').each(function() {$(this).parent()[Math.random() > 0.5 ? 'parent' : 'append']($(this).show())});
</script>
Вариант :dance:

рони 09.12.2017 06:26
случайный вывод блоков
 
LADYX,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   #elements div {
  display: none;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  var n = 5, divs = $('#elements div').get();
  for ( ; n--; )  {
  $(divs.splice(Math.random()*divs.length|0,1)).prependTo('#elements').show();
  }
});

  </script>
</head>

<body>

<div id="elements">
  <div id="container-1">
    Текст 1
  </div>
  <div id="container-2">
    Текст 2
  </div>
  <div id="container-3">
    Текст 3
  </div>
  <div id="container-4">
    Текст 4
  </div>
  <div id="container-5">
    Текст 5
  </div>
</div>

</body>
</html>

LADYX 09.12.2017 18:38
Poznakomlus,
рони,
да, спасибо за вашу помощь! Удачи вам!

VictorSlate 14.11.2018 22:38
Цитата:
Сообщение от Poznakomlus (Сообщение 472398) 
<style>#elements div {
  display: none;
}</style>
<div id="elements">
  <div id="container-1">
    Текст 1
  </div>
  <div id="container-2">
    Текст 2
  </div>
  <div id="container-3">
    Текст 3
  </div>
  <div id="container-4">
    Текст 4
  </div>
  <div id="container-5">
    Текст 5
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>$('#elements div').each(function() {$(this).parent()[Math.random() > 0.5 ? 'parent' : 'append']($(this).show())});
</script>
Вариант :dance:
Скажите, а есть хоть один вариант, чтобы сохранить сгенерированный порядок в куку и вывести его пользователю при последующих обновлениях страницы?

рони 14.11.2018 22:44
VictorSlate,
https://developer.mozilla.org/ru/doc...w/localStorage

VictorSlate 14.11.2018 22:56
Цитата:
Сообщение от рони (Сообщение 498565)
Можете подробнее объяснить ход ваших мыслей? Как сгенерированный порядок блоков в том же виде туда сохранить?
Ведь надо, чтобы НЕ обновлялся порядок блоков, кроме первого визита пользователя.

рони 14.11.2018 23:01
VictorSlate,
если нет ничего в localStorage создать массив, перемешать сохранить
вывести блоки согласно массиву.

VictorSlate 14.11.2018 23:20
Цитата:
Сообщение от рони (Сообщение 498569)
VictorSlate,
если нет ничего в localStorage создать массив, перемешать сохранить
вывести блоки согласно массиву.
А можете привести пример пожалуйста, боюсь, что мне пока не по зубам такая задача, а с применением шаблона я смогу её понять и подстроить под свою задачу. Буду очень признателен...

рони 14.11.2018 23:37
localStorage and random
 
VictorSlate,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   #elements div {
  display: none;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  var divs = $("#elements div").get(), len = divs.length;
  var arr = localStorage.getItem("arr");
  if (!arr) {
    arr = [];
    for (; len;) {
      arr.push(Math.random() * len-- | 0);
    }
    localStorage.setItem("arr", JSON.stringify(arr));
  } else {
    arr = JSON.parse(arr);
  }
  arr.forEach(function(e) {
    $(divs.splice(e, 1)).prependTo("#elements").show();
  });
});
  </script>
</head>

<body>

<div id="elements">
  <div id="container-1">
    Текст 1
  </div>
  <div id="container-2">
    Текст 2
  </div>
  <div id="container-3">
    Текст 3
  </div>
  <div id="container-4">
    Текст 4
  </div>
  <div id="container-5">
    Текст 5
  </div>
</div>

</body>
</html>


Часовой пояс GMT +3, время: 20:24.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице