我如何一次设置每个 li 元素的样式?
How do i style each li element at a time?
我试图在单击时一次为每个 <li>
元素设置样式,而不是一次全部设置。对于每次点击,第一次点击,然后第二次点击,下一次点击……
此代码一次性为所有 li 元素添加样式。我该怎么做?
$("a").click(function() {
var menu = document.getElementsByTagName("li");
for (var i = 0; menu[i]; i++) {
$(menu).css("background", "red");
}
});
p {
color: red;
margin: 5px;
cursor: pointer;
}
p:hover {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>sdadsa</a>
<ul>
<li>asda</li>
<li>sadada</li>
<li>sada</li>
<li>asdad</li>
</ul>
一种方法是添加 class 来进行样式设置。
当您单击您的元素时,找到第一个没有 class 的 <li>
并将其添加到那个
添加和删除 classes 通常比修改和撤消内联样式更容易
$("a").click(function() {
$('li').not('.red-bg').first().addClass('red-bg')
});
.red-bg {background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>sdadsa</a>
<ul>
<li>asda</li>
<li>sadada</li>
<li>sada</li>
<li>asdad</li>
</ul>
您可以使用 jQuery 的 .css() 来检查指定元素的 css 值
$("a").click(function() {
var menu = document.getElementsByTagName("li");
for (var i = 0; menu[i]; i++) {
// get element of current index
const menuElement = menu[i];
// if the first element's background is not red.
if ($(menuElement).css("background") !== "red") {
// set it red.
$(menuElement).css("background", "red");
// escape for loop
break;
}
}
});
您可以使用指向当前 li 元素的变量,该元素应在下次单击时更改背景。单击锚标记时,我们会删除前一个 li 元素的背景并更改当前元素的背景
<script>
let current = 0;
$("a").click(function () {
var menu = document.getElementsByTagName("li");
let prev = current-1;
if(prev==-1) prev = menu.length-1;
menu[prev].style.background = "none";
menu[current].style.backgroud = "red";
current = (current + 1)%menu.length;
});
</script>
我试图在单击时一次为每个 <li>
元素设置样式,而不是一次全部设置。对于每次点击,第一次点击,然后第二次点击,下一次点击……
此代码一次性为所有 li 元素添加样式。我该怎么做?
$("a").click(function() {
var menu = document.getElementsByTagName("li");
for (var i = 0; menu[i]; i++) {
$(menu).css("background", "red");
}
});
p {
color: red;
margin: 5px;
cursor: pointer;
}
p:hover {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>sdadsa</a>
<ul>
<li>asda</li>
<li>sadada</li>
<li>sada</li>
<li>asdad</li>
</ul>
一种方法是添加 class 来进行样式设置。
当您单击您的元素时,找到第一个没有 class 的 <li>
并将其添加到那个
添加和删除 classes 通常比修改和撤消内联样式更容易
$("a").click(function() {
$('li').not('.red-bg').first().addClass('red-bg')
});
.red-bg {background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>sdadsa</a>
<ul>
<li>asda</li>
<li>sadada</li>
<li>sada</li>
<li>asdad</li>
</ul>
您可以使用 jQuery 的 .css() 来检查指定元素的 css 值
$("a").click(function() {
var menu = document.getElementsByTagName("li");
for (var i = 0; menu[i]; i++) {
// get element of current index
const menuElement = menu[i];
// if the first element's background is not red.
if ($(menuElement).css("background") !== "red") {
// set it red.
$(menuElement).css("background", "red");
// escape for loop
break;
}
}
});
您可以使用指向当前 li 元素的变量,该元素应在下次单击时更改背景。单击锚标记时,我们会删除前一个 li 元素的背景并更改当前元素的背景
<script>
let current = 0;
$("a").click(function () {
var menu = document.getElementsByTagName("li");
let prev = current-1;
if(prev==-1) prev = menu.length-1;
menu[prev].style.background = "none";
menu[current].style.backgroud = "red";
current = (current + 1)%menu.length;
});
</script>