仅在存在其他班级时添加班级

时间:2018-09-29 15:07:26

标签: javascript jquery css wordpress class

我的网站上有以下代码

<body>
  <div class="wrapper">
    <div class="wrapper_inner">
      <header class="scroll_top stick transparent">
  <div class="responsive-menu-pro-button">
    <span class="responsive-menu-pro-box">
      <span class="responsive-menu-pro-inner">

我想要的是,如果“标头”中存在类“ light”,则将“ light-buttom”类添加到“ span”中,并且类为“ response-menu-pro-inner” ...因此代码如下:

<body>
  <div class="wrapper">
    <div class="wrapper_inner">
      <header class="scroll_top light stick transparent">
  <div class="responsive-menu-pro-button">
    <span class="responsive-menu-pro-box">
      <span class="responsive-menu-pro-inner light-buttom">

如果代码中没有“ light”类(因为它是在滚动条上添加的),则“ light-buttom”类将被删除,并且该代码将作为第一个。

谢谢

2 个答案:

答案 0 :(得分:1)

您可以使用classList.contains()检查标题中是否存在该类,然后使用classList.add()将“轻键”类添加到范围中。

if (yourHeader.classList.contains("light") {
  yourSpan.classList.add("light-button");
}

要删除“按钮”类,可以使用classList.remove()

if (!yourHeader.classList.contains("light") {
  yourSpan.classList.remove("light-button");
}

答案 1 :(得分:1)

您可以使用一些简单的javascript来实现该目标,

if(document.querySelector(".wrapper header").classList.contains("light")) {
    document.querySelector(".wrapper header.light .responsive-menu-pro-inner").classList.add("light-buttom");
}

您可以阅读有关classList here

的信息