Question

为了覆盖我无法改变的CSS，我需要添加类＆＃34;隐藏＆＃34;对于第一个带有＆＃34;！important＆＃34;文本＆＃34;土耳其|肉类＆＃34;在场。

现在，当我尝试删除＆＃34;隐藏＆＃34;使用.removeClass（），＆＃34;隐藏＆＃34;仍然存在，我认为这是因为＆＃34;！important＆＃34;规则。这是我的编码：

＆＃13;

(function($) {
  if ($(".nav li:nth-of-type(2)").text().trim() == "Turkey | Meats") {
    $(".nav li:nth-of-type(1)").addClass("hide");
  } else {
    $(".nav li:nth-of-type(1)").removeClass("hide");
  }
});

＆＃13;

.hide {
  display:none !important;
}

＆＃13;

<div class="nav">
  <ul class="nav-list">
    <li class="nav-link">
      <a href="">Fish</a>
    </li>
    <li class="nav-link">
      <a href="">Turkey | Meats</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

添加/删除类工作正常，请查看此示例：

if ($(".nav li:nth-of-type(2)").text().trim() == "Turkey | Meats") {
        $(".nav li:nth-of-type(1)").addClass("hide");
        console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
} else {
        $(".nav li:nth-of-type(1)").removeClass("hide");
        console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
}
$("button:first").click(function(){
    $(".nav li:nth-of-type(1)").removeClass("hide");
    console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
});
$("button:last").click(function(){
    $(".nav li:nth-of-type(1)").addClass("hide");
    console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
});

.hide {
  display:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul class="nav-list">
    <li class="nav-link">
      <a href="">Fish</a>
    </li>
    <li class="nav-link">
      <a href="">Turkey | Meats</a>
    </li>
  </ul>
  <button type="button">Remove Class .hide</button>
  <button type="button">Add Class .hide</button>
</div>

如果＆＃34;！important＆＃34;如何使用removeClass（）使用了？

1 个答案: