将 class 添加到父级

Question

我希望将元素的当前 class 添加到 Jquery 中的父元素 div。

这是我的代码：

#sidebar { background-color:red;} /*this element change color by getting links classes*/

#contenerFAQ #sidebar.navigation ul.navigationFAQ li { 
  background-color:#fff;
  border-bottom:1px solid #f3f3f3
}

#contenerFAQ #sidebar.navigation ul.navigationFAQ li.active {
  background:transparent;
}


.navigationFAQ h3:before {
  background:url(imgs/icons-services/picto_groupe.svg);
  content: "";
  display: inline-block;
  background-size:contain; 
  background-repeat:no-repeat;
  width: 2vw;
  height: 2vw;
  top: 0px;
  position: relative;
  opacity: 0.95;
  vertical-align: middle;
  margin-left:1.5vw;
}

#contenerFAQ #sidebar .titre {
    background:#323232;
    height: 4vw;
    float: left;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    font-size: 1vw;
    font-family:"lemonadaBold";
    line-height: 12vw;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-transform: uppercase;
    margin-right:1vw;
}

.navigationFAQ {
  margin-right:1vw;
}
.navigationFAQ h3 a {
  height:3vw;
  line-height:3vw;
  padding-left:1vw;
  font-family:"dosisRegular";
  text-transform:uppercase;
  color:#333;
  text-decoration:none;
  font-size: 0.85vw;
}

<div id="sidebar" class="navigation">
  <div class="titre">
    <h2>Choisir un thème</h2>
  </div>
  <ul class="navigationFAQ">  
    <li class="methode-icon"><h3><a href="#methode-section" class="backgroundLi methodeLink">Méthode naturelle</a></h3></li>
 <li class="education-icon"><h3><a href="#education-section" class="backgroundLi educationLink">Education canine</a></h3></li>
 <li class="pension-icon "><h3><a href="#pension-section" class="backgroundLi pensionLink">Pension canine</a></h3></li>
 <li class="toilettage-icon "><h3><a href="#toilettage-section" class="backgroundLi toilettageLink">Toilettage</a></h3></li>
  </ul>
</div>

我希望将 classes "pensionLink"、"toilettageLink"、"methodeLink" 和 "educationLink" 添加到#sidebar。如果我们点击 pensionlink，我们将 class "pensionLink" 添加到 #sidebar 等。目标是通过赋予它与 link 相同的 class 来更改 #sidebar 背景色。

exemple link 1 clicked exemple link 2 clicked

有人知道怎么做吗？

谢谢:)

Answer 1

这应该按照您的要求工作：

$(".navigationFAQ li a").click(function() {
  $("#sidebar").removeClass("methodeLink educationLink pensionLink toilettageLink").addClass($(this).attr('class').split(' ')[1])
})

演示

$(".navigationFAQ li a").click(function() {
  $("#sidebar").removeClass("methodeLink educationLink pensionLink toilettageLink").addClass($(this).attr('class').split(' ')[1])
})

#sidebar {
  background-color: red;
}


/*this element change color by getting links classes*/

#contenerFAQ #sidebar.navigation ul.navigationFAQ li {
  background-color: #fff;
  border-bottom: 1px solid #f3f3f3
}

#contenerFAQ #sidebar.navigation ul.navigationFAQ li.active {
  background: transparent;
}

.navigationFAQ h3:before {
  background: url(imgs/icons-services/picto_groupe.svg);
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  width: 2vw;
  height: 2vw;
  top: 0px;
  position: relative;
  opacity: 0.95;
  vertical-align: middle;
  margin-left: 1.5vw;
}

#contenerFAQ #sidebar .titre {
  background: #323232;
  height: 4vw;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1vw;
  font-family: "lemonadaBold";
  line-height: 12vw;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-transform: uppercase;
  margin-right: 1vw;
}

.navigationFAQ {
  margin-right: 1vw;
}

.navigationFAQ h3 a {
  height: 3vw;
  line-height: 3vw;
  padding-left: 1vw;
  font-family: "dosisRegular";
  text-transform: uppercase;
  color: #333;
  text-decoration: none;
  font-size: 0.85vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar" class="navigation">
  <div class="titre">
    <h2>Choisir un thème</h2>
  </div>
  <ul class="navigationFAQ">
    <li class="methode-icon">
      <h3><a href="#methode-section" class="backgroundLi methodeLink">Méthode naturelle</a></h3>
    </li>
    <li class="education-icon">
      <h3><a href="#education-section" class="backgroundLi educationLink">Education canine</a></h3>
    </li>
    <li class="pension-icon ">
      <h3><a href="#pension-section" class="backgroundLi pensionLink">Pension canine</a></h3>
    </li>
    <li class="toilettage-icon ">
      <h3><a href="#toilettage-section" class="backgroundLi toilettageLink">Toilettage</a></h3>
    </li>

  </ul>
</div>

将 class 添加到父级

Add class to the parent

jquery

parent