Добавить класс в один элемент списка на основе его innerHtml
-7
0
Я хочу использовать 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
3 года, 5 месяцев назад
добавить комментарий
пожаловаться
105
Вы можете избавиться от всех, 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
3 года, 5 месяцев назад
добавить комментарий
пожаловаться
Ваш ответ