Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Присвоить рандомно класс (https://javascript.ru/forum/dom-window/74391-prisvoit-randomno-klass.html)

ureech 06.07.2018 13:35

Присвоить рандомно класс
 
Привет. Нужно чтобы класс show присваивался рандомно к li. В данном коде он последовательно присваивается по кругу от li к li.

$('#hide_right li:first-child').addClass('');
    setInterval(function () {
        var show_element = $('#hide_right li.show');
        var next_element = $('#hide_right li.show').next();
        if (next_element.length == 0) {
            next_element = $('#hide_right li:first-child');
        }
        show_element.removeClass('show');
        next_element.addClass('show');
    }, 2000);
});


Думаю в этом направлении.
Вначале следует сгенерировать рандомный порядок li наверное:
function numLi(){  
                   var element = $('#hide_right li'); 
		   var min = 1;
		   var max =element.length; 
	       for (var i = 0; i < 1  ; i++){
		      randomLi = Math.floor(Math.random() * (max - min +1)) + min;	   
		      }
 
		   return randomLi;
 
		}

А вот дальше сомневаюсь)

Manyasha 06.07.2018 14:11

ureech, так надо?
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
	.show{display: block;}
	li {display: none;}
</style>
<ul id="hide_right">
	<li>Item1</li>
	<li>Item2</li>
	<li>Item3</li>
	<li>Item4</li>
	<li>Item5</li>
</ul>
<script>
	var max =$('#hide_right li').length;
		setInterval(function () {
			var min = 1;
			randomLi = Math.floor(Math.random() * (max - min +1)) + min; 
			$('#hide_right li.show').removeClass('show');
			$('#hide_right li').eq(randomLi-1).addClass('show');
		}, 1000);
</script>

рони 06.07.2018 14:18

Manyasha,
а без min ?

ureech 06.07.2018 14:27

ну, да.Можно и без)
randomLi = Math.floor(Math.random() * (max+1));
Спасибо,Manyasha

рони 06.07.2018 15:23

рандомно без повторений
 
ureech,
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
    .show{display: block;}
    li {display: none;}
</style>
<ul id="hide_right">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
</ul>
<script>
    var li = $('#hide_right li').get(), el = rnd(li), temp = [];
    function rnd(li)
    {
       var index = Math.floor(Math.random() * li.length);
       return li.splice(index,1)
    }

    function show()
    {
       li.length || (li = temp, temp = []);
       $(el).removeClass('show');
       temp = temp.concat(el);
       el = rnd(li);
       $(el).addClass('show');
       window.setTimeout(show, 1000)
    }
    show()

</script>

рони 06.07.2018 17:07

Цитата:

Сообщение от ureech
ну, да.Можно и без)

без значит без,
randomLi = Math.floor(Math.random() * max);
//...
 $('#hide_right li').eq(randomLi).addClass('show');

j0hnik 07.07.2018 00:07

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
    .show{display: block;}
    li {display: none;}
</style>
<ul id="hide_right">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
</ul>
<script>
    var li = $('#hide_right li'), x;
    (function show(){
    	 do index = Math.floor(Math.random() * li.length);
    	 while(x == index);
         li.eq(x).removeClass('show');
    	 x = index;
       li.eq(index).addClass('show');
       setTimeout(show, 1000);
    }());
</script>


без повторений

Dilettante_Pro 07.07.2018 06:53

j0hnik,
А чему равно x?

рони 07.07.2018 09:04

Цитата:

Сообщение от j0hnik
без повторений

но лишние генерации индекса + цикл при удалении класса, когда есть(будет, не доделан х) x равный индексу элемента?

j0hnik 07.07.2018 15:09

Dilettante_Pro,
x = index; предыдущей генерации
Спасибо за замечание :)

рони цикл убрал, генерация лайтовый процесс, тем более его вероятность тут 20%.
Конкатенация например гораздо более тяжелый процесс ;)


Часовой пояс GMT +3, время: 18:34.