jquery - 检查多个类元素的可用性

应用程序所需的逻辑

如果Item1＆Item2＆Item3存在-添加class 1

如果Item1和Item2存在-添加class 2

如果Item1和Item3存在-添加class 3

如果Item1存在或Item2＆Item3不存在-添加class 4

Else Remove所有课程项目

不确定如何在jquery中编码此逻辑。当我编码时，任何一个都无法正常工作。请帮助解决此问题。

if ($(("li.item1") && ("li.item2") && ("li.item3")).length) {
  $(".content").addClass("1");
  $(".content").removeClass("2");
  $(".content").removeClass("3");
  $(".content").removeClass("4");
} else if ($(("li.item1") && ("li.item2")).length) {
  $(".content").addClass("2");
  $(".content").removeClass("1");
  $(".content").removeClass("3");
  $(".content").removeClass("4");
} else if ($(("li.item1") && ("li.item3")).length) {
  $(".content").addClass("3");
  $(".content").removeClass("1");
  $(".content").removeClass("2");
  $(".content").removeClass("4");
} else if (!$(("li.item2") && ("li.item3")).length) {
  $(".content").addClass("4");
  $(".content").removeClass("1");
  $(".content").removeClass("2");
  $(".content").removeClass("3");
} else {
  $(".content").removeClass("1");
  $(".content").removeClass("2");
  $(".content").removeClass("3");
  $(".content").removeClass("4");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item item3">
    <a href="javascript:;" id="selector">Test1</a>
  </li>
  <li class="item item2">
    <a href="javascript:;" id="selector">Test2</a>
  </li>
  <li class="item item1">
    <a href="javascript:;" id="selector">Test2</a>
    <div class="content">
      <input id="search" name="search" class="search-input" type="search" placeholder="Search">
    </div>
  </li>
</ul>

最佳答案

Fiddle

jQuery的：

$(document).ready(function() {
  $("li").each(function() {
    if ($("li").hasClass("item1") && $("li").hasClass("item2") &&
      $("li").hasClass("item3")) {
      $(".content").removeClass("2 3 4").addClass("1");
    } else if ($("li").hasClass("item1") && $("li").hasClass("item2")) {
      $(".content").removeClass("1 3 4").addClass("2");
    } else if ($("li").hasClass("item1") && $("li").hasClass("item3")) {
      $(".content").removeClass("1 2 4").addClass("3");
    } else if (!$("li").hasClass("item2") && !$("li").hasClass("item3")) {
      $(".content").removeClass("1 2 3").addClass("4");
    } else {
      $(".content").removeClass("1 2 3 4");
    }
  });
});

HTML: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item1 item3">
    <a href="javascript:;" id="selector">Test1</a>
  </li>
  <li class="item item2">
    <a href="javascript:;" id="selector">Test2</a>
  </li>
  <li class="item item1">
    <a href="javascript:;" id="selector">Test2</a>
    <div class="content">
      <input id="search" name="search" class="search-input" type="search" placeholder="Search">
    </div>
  </li>
</ul>