我如何一次为每个 li 元素设置样式？

Posted 2023-03-16

【中文标题】我如何一次为每个 li 元素设置样式？

【英文标题】：How do i style each li element at a time?

【发布时间】：2021-08-26 19:40:46

【问题描述】：

我试图在点击时一次设置每个<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>

【问题讨论】：

您必须以某种方式跟踪列表项索引。你试过什么？

顺便说一句，您可能不应该使用这样的锚（链接）。使用按钮或仅使用结构元素。锚点用于导航。

@isherwood 我尝试添加类并检查 li 元素是否具有类，但我确信有一种更简单的方法......但无论如何都没有用

【参考方案1】：

你可以使用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;
    
  
);

【参考方案2】：

您可以使用指向当前 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>

【参考方案3】：

一种方法是添加一个类来进行样式设置。

当您单击您的元素时，找到第一个没有该类的 <li> 并将其添加到该类中。

添加和删除类通常比修改和撤消内联样式更容易

$("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>