Рандомизировать CSS классы с помощью Jquery

Question

Я новичок в jQuery и пытаюсь повернуть 6 классов CSS

.img
.img1
.img2
.img3
.img4
.img5

Только один из этих классов имеет "display: block;" остальные имеют «display: none;».

Я пытаюсь в основном рандомизировать внешний вид этих классов - для этих 6 классов - путем создания текущего "display: block" goto "display: none", а затем другой класс меняется на "Display: block" каждый раз, когда страница загружает?

Кто-нибудь сможет помочь?

Answer 1

var ran = rand(0,5)
$('.img').hide();
$('.img' + ran).show();

Дайте всем элементам 2 класса 1 'img', а затем уникальный класс 'img1, img2 и т. Д.'

Answer 2

Вы можете рандомизировать свои стили, используя JQuery. Посмотрите на этот пример на CodePen: http://codepen.io/aziev/pen/xwpREN

// put in this array your classes
classes = ['class1', 'class2', 'class3'];

max = classes.length - 1;
currentClass = Math.round(Math.random() * max);

// change '.block' to selector of your element
$('.block').addClass(classes[currentClass]);

Answer 3

Выберите один для отображения, затем скройте их все, отфильтруйте по классу, который вы хотите показать, и отобразите его. Будет проще, если вы дадите им общий класс, скажем, img, чтобы упростить глобальный выбор.

var showClass = '.img' + parseInt(Math.random() * 6, 10);

$('.img').hide().filter(showClass).show();

Answer 4

Ваш вопрос неясен.

Я предполагаю, что вы пытаетесь случайным образом показать все элементы, которые соответствуют одному из этих классов.

Вы можете сгенерировать случайное число от 0 до 6, написав parseInt(Math.random() * 6, 10).

Таким образом, вы можете написать что-то вроде этого: (и изменить .img на .img0)

var indexToShow = parseInt(Math.random() * 6, 10);

for(var i = 0; i <= 6; i++) {
    if(i === indexToShow)
        $('.img' + i).show();
    else
        $('.img' + i).hide();
}

Если вы создадите другой класс (например, .img) и добавите его ко всем элементам, вы можете упростить его:

$('.img').hide();
$('.img' + parseInt(Math.random() * 6, 10)).show()

Answer 5

Просто измените класс всех изображений, исключая один, который был выбран случайным образом.

псевдокод:

var img_id = rand(0,5);

for (i=0;i<5; ++i)
{
   if (i!=img_id)
      $("image_"+img_id).class = hiddenclass;
}