Question

我正在尝试根据特定条件删除一个类。

我正在添加以下代码以供参考。

HTML

<li id="menu-item-81" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-81">
    <a href="#home" class="currentItem">
        <span class="no-color-4u small-font">HOME</span>
    </a>
</li>

的jQuery

if (jQuery("#menu-item-81 a").hasClass("currentItem")) {
    alert('I has the class');
    jQuery('.small-font').removeClass('no-color-4u');
} else {
    alert("I don't has the class");
    jQuery('.small-font').addClass('no-color-4u');  
}

在这种情况下，警报有效。但是一旦检测到标签的类，我就看不到跨度的类被删除了。有人可以帮帮我吗？

在以下代码中

jQuery('.small-font').removeClass('no-color-4u');

班级no-color-4u仍显示在span标记中。即使#menu-item-81 a具有currentItem类。你还需要什么吗？

感谢。

Answer 1

您发布的代码按预期工作。检查您是否在HTML页面中添加了jquery插件。

＆＃13;

$(document).ready(function(){
  if (jQuery("#menu-item-81 a").hasClass("currentItem")) {
      alert('I has the class');
      jQuery('.small-font').removeClass('no-color-4u');
  } else {
      alert("I don't has the class");
      jQuery('.small-font').addClass('no-color-4u');  
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="menu-item-81" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-81">
    <a href="#home" class="currentItem">
        <span class="no-color-4u small-font">HOME</span>
    </a>
</li>
</ul>

＆＃13;

Answer 2

＆＃13;

$(document).ready(function() {
  $(".lnkMenu").on("click", function() {
    $(".lnkMenu").removeClass("currentItem");
    $(this).addClass("currentItem");
    $(".lnkMenu").children("span").removeClass("no-color-4u");
    $(this).children("span").addClass("no-color-4u");
  });
});

＆＃13;

ul, li{
  list-style:none;
}
a {
  text-decoration: none;
  font-size: 12px;
  font-family: arial;
  color: #000000;
}

a.currentItem {
  color: #FF0000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="menu-item-81" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-81">
    <a href="#home" class="lnkMenu currentItem">
      <span class="no-color-4u small-font">Menu 1</span>
    </a>
  </li>
  <li>
    <a href="#home" class="lnkMenu">
      <span class="small-font">Menu 2</span>
    </a>
  </li>
  <li>
    <a href="#home" class="lnkMenu">
      <span class="small-font">Menu 3</span>
    </a>
  </li>
</ul>

＆＃13;

Answer 3

 $(document).ready(function(){
      if (jQuery("#menu-item-81 a .small-font").hasClass("no-color-4u")) {
          alert('I has the class');
          jQuery('.small-font').removeClass('no-color-4u');
      } else {
          alert("I don't has the class");
          jQuery('.small-font').addClass('no-color-4u');  
      }
  });

jQuery：如何根据特定条件删除类？

3 个答案: