基于其innerHtml将类添加到一个列表项

Question

我想使用jQuery根据其innerHtml值与一个span的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>

然而，我觉得它可以变得更有效率，写得更整齐。如何改进此代码？

Answer 1

首先将所选值放入变量中，然后在设置类时将其用作参数，就可以删除所有if：

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

请注意，如果您希望将值限制为1..3，则在设置课程之前，您必须拥有if (selected >= 1 && selected <= 3)。