jquery - 根据复选框状态修改父类

Question

仍然完全是 JS 菜鸟，但我正在制作一个模态窗口，它将具有三种状态:隐藏、悬停和内联。

将有多个窗口实例 - 每个实例都有不同的内容。

我能够将一些东西“博格立方体”在一起，它已经接近我需要的东西，但我不知道如何添加我需要的复选框状态。

基本上，我想在单击模式上的复选框时向父跨度添加一个内联类。它也需要在单击时删除 .hide。如果未单击该框或未选中该框，则应将 .hide 类设置为父跨度。

我找到了一些查看复选框但无法弄清楚如何集成它的代码:

$a('.switch-checkbox').change(function(){
 if($(this).is(":checked")) {
  this.parentElement.classList.add("inline");
  this.parentElement.classList.remove("hide");
  this.parentElement.classList.remove("hover");
 } else {
  this.parentElement.classList.add("hide");
  this.parentElement.classList.remove("inline");
 }
});

我一直在 Codepen 中使用它:

https://codepen.io/axiomwebworks/pen/RwNbajy

如有任何帮助，我们将不胜感激。考虑到我是 JS 的新手，我知道我正在跳得更深，我目前正在学习 Udemy 上的一门很棒的类(class)，所以我希望继续变得更好 - 谢谢 -Scott

Answer 1

好的，我想我已经达到了您的要求，而且您已经接近了。我使用了您提供的代码并更改了一些内容。由于您使用的是 jquery，因此我还在 change 函数中使用了 jquery 方法。此外，不仅是 jquery，纯 js 也可以 toggle/toggleClass 添加或删除类。试试下面的代码。如果有的话，它可能会帮助您走上正轨。

let mantra = document.querySelectorAll(".mantra-link"), 
toggleHover = function() {
  [].map.call(mantra, function(elem) { });
  this.classList.remove("inline");
  this.classList.add("hover");
  this.classList.toggle("hide");
};

[].map.call(mantra, function(elem) {       
  elem.addEventListener("click", toggleHover, false);
});

$('.switch-checkbox').on('change', function() {
   if ($(this).is(":checked")) {
     $(this)
      .parent('aside')
      .parent('span')
      .toggleClass("inline hide hover");
   }
});

.mantra-link{
  postion: relative;
  display:inline-block;
  border: solid red;
}
aside{
  background-color: white;
}

.inline aside{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: solid 1px red;
}
.hovercard p{
  width: 100%;
}
.hide aside {
  display: none; /* Need this in case it's not hovering */
  visibility: hidden;
}
.hover aside{
  display: flex;
  position: absolute;
  top: 2.25m;
  background-color: white; 
  border: solid 1px gray;
  padding: 20px;
}
.inline{
  width: 100% ;
  display: block;
  width: 100%;
  border: blue solid 1px ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="kyu-library-steps">
  <h3 class="kyu-library-tag-heading">Instructions</h3>
  <ol class="kyu-library-steps-list">
    <li class="kyu-library-step">
      <div class="kyu-library-text"> <span class="mantra-link hide">Chant the <a href="#">Guru Ram Das Mantra </a> 
        <aside class="hovercard">
          <p>Lots of content about Mantra.</p>
          <span class="kyul-embed mantra-inline">Show mantra inline</span> 
          <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" unchecked>
          <label class="switch-labels" for="myswitch"></label>
        </aside>
        </span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima blanditiis consequuntur animi in quos aperiam voluptates eveniet possimus libero ipsa. Eaque, quisquam! Commodi, sit? Quod dignissimos illo voluptatem dolorem fuga?
      </div>
    </li>
    <li class="kyu-library-step">
      <div class="kyu-library-text"> <span class="mantra-link hide">Chant the <a href="#">Guru Ram Das Mantra </a> 
        <aside class="hovercard">
          <p>Lots of content about Mantra.</p>
          <span class="kyul-embed mantra-inline">Show mantra inline</span> 
          <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
          <label class="switch-labels" for="myswitch"></label>
        </aside>
        </span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima blanditiis consequuntur animi in quos aperiam voluptates eveniet possimus libero ipsa. Eaque, quisquam! Commodi, sit? Quod dignissimos illo voluptatem dolorem fuga?
      </div>
    </li>
    <li class="kyu-library-step">
      <div class="kyu-library-text"> <span class="mantra-link hide">Chant the <a href="#">Guru Ram Das Mantra </a> 
        <aside class="hovercard">
          <p>Lots of content about Mantra.</p>
          <span class="kyul-embed mantra-inline">Show mantra inline</span> 
          <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" unchecked>
          <label class="switch-labels" for="myswitch"></label>
        </aside>
        </span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima blanditiis consequuntur animi in quos aperiam voluptates eveniet possimus libero ipsa. <span class="mantra-link hide">Chant the <a href="#">Guru Ram Das Mantra </a> 
        <aside class="hovercard">
          <p>Lots of content about Mantra.</p>
          <span class="kyul-embed mantra-inline">Show mantra inline</span> 
          <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" unchecked>
          <label class="switch-labels" for="myswitch"></label>
        </aside>
        </span>Eaque, quisquam! Commodi, sit? Quod dignissimos illo voluptatem dolorem fuga?
      </div>
    </li>
  </ol>
</section>