I want to change the text color of <li>
one by one when I click the change button. Once all the <li>
text is red it'll show the alert message "all li text color changed!".
My html code is:
<html>
<body>
<button id="change">change li text-color</button>
<ul id="nav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
</body>
</html>
and my script is (jquery v1.5.2):
$(document).ready(function ()
{
$('#change').click(function ()
{
$('#nav li').each(function ()
{
$(this).css('color', '#F00');
});
});
});
I think you want change colors one by one with each click. Add a counter:
$(document).ready(function ()
{
var len = $('#nav li').length,
cnt = 0;
$('#change').click(function ()
{
if (cnt < len)
{
$('#nav li:eq('+cnt+')').css('color', '#F00');
cnt++;
} else {
alert("all li text color changed!");
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.