Добавить класс в один элемент списка на основе его innerHtml

-6

Я хочу использовать jQuery для установки класса в одном элементе списка на основе его значения innerHtml, соответствующего значению innerHtml диапазона.

Мне удалось написать следующий код:

if ($(".number").text() === "1") {
$("li:eq(0)").addClass("selected");
}
if ($(".number").text() === "2") {
$("li:eq(1)").addClass("selected");
}
if ($(".number").text() === "3") {
$("li:eq(2)").addClass("selected");
}
.selected {
background-color: #dFd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="number">2</span> <ul id="menu"> <li>1</li> <li>2</li> <li>3</li> </ul>

Тем не менее, я чувствую, что он может быть более эффективным и написанным более аккуратно. Как я могу улучшить этот код?

спросил(а) 2017-09-07T19:45:00+03:00 2 года, 5 месяцев назад
0
86

Вы можете избавиться от всех, if сначала получить выбранное значение в переменную, а затем использовать это как параметр при настройке класса:

var selected = parseInt($(".number").text(), 10) - 1;
$("li:eq("+selected+")").addClass("selected");

Обратите внимание, что если вы хотите ограничить значение до 1..3, как в вашем примере, вы должны иметь, if (selected >= 1 && selected <= 3) перед установкой класса.

ответил(а) 2017-09-07T22:12:00+03:00 2 года, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема