Question

应用程序所需的逻辑

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

如果Item1＆amp; Item2存在 - 添加class 2

如果Item1＆amp; Item3存在 - 添加class 3

如果Item1存在或Item2＆amp; 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>

Answer 1

if($(("li").hasClass("item1") && ("li").hasClass("item2") && ("li")).hasClass("item3")){
     // then it will work
}

为所有条件添加此内容..

这也有清洁的解决方案..

if($(li.item1.item2.item3).length > 0){
   // add your class..
}

Answer 2

Fiddle

<强> JQuery的 ：

＆＃13;

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

＆＃13;

<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>

＆＃13;

检查多个类元素的可用性

2 个答案: