Вопрос по атрибуту data-number !?

Question

Вопрос по атрибуту data-number !?

VortexWeb.net Мыслитель (6139), открыт 22 часа назад

Подскажите на JS или jQuery решение такой проблемы!
Есть элемент ul в котором соответственно несколько li. При нажатии на кнопку, происходит рандомный выбор какой то из li по счету например от 1 до 8 и в data-number прописывается номер этой li то есть какая то из них по счету.
Вопрос: Как по номеру который высветился в data-number="8" например присвоить восьмой li, определенный класс, пробую по +current+ не выходит.

Answer 1

Вот решение вашей задачи:

  
// Вариант на jQuery 
$('button').click(function() { 
    // Генерируем случайное число от 1 до количества li 
    const randomNum = Math.floor(Math.random() * $('ul li').length) + 1; 
     
    // Записываем номер в data-number 
    $('ul').attr('data-number', randomNum); 
     
    // Удаляем класс у всех li и добавляем нужному 
    $('ul li').removeClass('current'); 
    $('ul li:nth-child(' + randomNum + ')').addClass('current'); 
}); 
 
// Вариант на чистом JavaScript 
document.querySelector('button').addEventListener('click', function() { 
    const ul = document.querySelector('ul'); 
    const items = ul.querySelectorAll('li'); 
     
    // Генерируем случайное число 
    const randomNum = Math.floor(Math.random() * items.length) + 1; 
     
    // Записываем номер в data-number 
    ul.dataset.number = randomNum; 
     
    // Удаляем класс у всех li и добавляем нужному 
    items.forEach(item => item.classList.remove('current')); 
    items[randomNum - 1].classList.add('current'); 
});

Оба варианта делают одно и то же:
1. Генерируют случайное число в пределах количества li элементов
2. Записывают это число в атрибут data-number у ul
3. Удаляют класс current у всех li
4. Добавляют класс current нужному li по индексу

Для работы кода нужна примерно такая HTML структура:

 <button>Выбрать случайный</button> 
<ul data-number=""> 
    <li>Элемент 1</li> 
    <li>Элемент 2</li> 
    <li>Элемент 3</li> 
    <!-- ... --> 
    <li>Элемент 8</li> 
</ul>