Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2017, 22:50
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Рандомный вывод блоков
Здравствуйте! Если выводить меньше блоков, чем есть всего, то ротация работает. Если выводить все блоки, тогда ротации нет. Помогите, пожалуйста, исправить ошибки. Спасибо!
$(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>
Ответить с цитированием
  #2 (permalink)  
Старый 09.12.2017, 01:45
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<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>
Вариант
Ответить с цитированием
  #3 (permalink)  
Старый 09.12.2017, 06:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

случайный вывод блоков
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>
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2017, 18:38
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Poznakomlus,
рони,
да, спасибо за вашу помощь! Удачи вам!
Ответить с цитированием
  #5 (permalink)  
Старый 14.11.2018, 22:38
Новичок на форуме
Отправить личное сообщение для VictorSlate Посмотреть профиль Найти все сообщения от VictorSlate
 
Регистрация: 14.11.2018
Сообщений: 4

Сообщение от Poznakomlus Посмотреть сообщение
<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>
Вариант
Скажите, а есть хоть один вариант, чтобы сохранить сгенерированный порядок в куку и вывести его пользователю при последующих обновлениях страницы?
Ответить с цитированием
  #6 (permalink)  
Старый 14.11.2018, 22:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

VictorSlate,
https://developer.mozilla.org/ru/doc...w/localStorage
Ответить с цитированием
  #7 (permalink)  
Старый 14.11.2018, 22:56
Новичок на форуме
Отправить личное сообщение для VictorSlate Посмотреть профиль Найти все сообщения от VictorSlate
 
Регистрация: 14.11.2018
Сообщений: 4

Сообщение от рони Посмотреть сообщение
VictorSlate,
https://developer.mozilla.org/ru/doc...w/localStorage
Можете подробнее объяснить ход ваших мыслей? Как сгенерированный порядок блоков в том же виде туда сохранить?
Ведь надо, чтобы НЕ обновлялся порядок блоков, кроме первого визита пользователя.
Ответить с цитированием
  #8 (permalink)  
Старый 14.11.2018, 23:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

VictorSlate,
если нет ничего в localStorage создать массив, перемешать сохранить
вывести блоки согласно массиву.
Ответить с цитированием
  #9 (permalink)  
Старый 14.11.2018, 23:20
Новичок на форуме
Отправить личное сообщение для VictorSlate Посмотреть профиль Найти все сообщения от VictorSlate
 
Регистрация: 14.11.2018
Сообщений: 4

Сообщение от рони Посмотреть сообщение
VictorSlate,
если нет ничего в localStorage создать массив, перемешать сохранить
вывести блоки согласно массиву.
А можете привести пример пожалуйста, боюсь, что мне пока не по зубам такая задача, а с применением шаблона я смогу её понять и подстроить под свою задачу. Буду очень признателен...
Ответить с цитированием
  #10 (permalink)  
Старый 14.11.2018, 23:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт выравнивания высоты блоков razorg1991 Элементы интерфейса 13 15.01.2017 00:04
Скрипт карусели блоков rozmakc Работа 3 25.07.2016 21:35
Не работает код, при дублировании блоков! Rockship Элементы интерфейса 8 17.06.2015 11:47
Мерцание блоков при при скрытии vovammm Общие вопросы Javascript 4 04.05.2014 10:50
Вывод переменных MasterHrust Javascript под браузер 4 03.08.2011 15:41