添加Class到header <h1>如果li有Class

Question

我一直在摆弄我的代码，但我无法让它正常工作。

我有三个列表，每个列表都有一个 h1-header。如果单击 li，它会切换 class 以突出显示它，我希望列表的 header 突出显示 class。

到现在为止，每个 header 都得到了 class 除了那个应该。不知道我做错了什么...：/

谁能帮帮我？

这是我的代码：

    $(".add-btn").click(function() {
      $(this).toggleClass("hide-me");
      $(this).toggleClass("added");
      if ($(".label-wrap ul li").hasClass("added")) {
        $(".label-wrap").parent().find(".header-label").closest("h1").addClass("top-added");
      } else {
        $(".label-wrap h1").removeClass("top-added");
      }

    });

.hide-me {
  color: rgba(0, 0, 0, 0.1);
}
.added {
  color: rgba(0, 0, 0, 1);
}
.top-added {
  color: rgba(0, 170, 200, 1);
}
.delete-btn {
  width: 25px;
  height: 25px;
  padding: 10px;
}
.add-btn {
  width: 25px;
  height: 25px;
  padding: 10px;
}
.konf-wrapper-1 {
  margin-left: 50px;
}
.konf-wrapper-2 {
  margin-top: 60px;
  margin-left: 50px;
}
.konf-labels li {
  padding: 10px 0;
  font-weight: 400;
  width: 100%;
  text-align: left;
}
.konf-labels h1 {
  font-size: large;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-6 konf-labels">
  <div class="container">
    <div class="row row-centered konf-wrapper-1">
      <div class="col-md-4 ">
        <h1 class=" top-added">Konzeption</h1>
        <ul>
          <li class="added">Zielgruppendefinition</li>
          <li class="added">Kommunikationsstrategie</li>
        </ul>
      </div>

      <div class="col-md-4 label-wrap">
        <h1 class="top-service">Kommunikationsmaßnahmen</h1>
        <ul class="li-wrap">
          <li class="hide-me add-btn point" id="1a">Exposé</li>
          <li class="hide-me add-btn point">Textdesign</li>
          <li class="hide-me add-btn point">Anzeigenkampagnen</li>
          <li class="hide-me add-btn point">Außenwerbung</li>
          <li class="hide-me add-btn point">Bautafelgestaltung</li>
          <li class="hide-me add-btn point">Geschäfts- & Presseberichte</li>
        </ul>
      </div>
    </div>

    <div class="row row-centered konf-wrapper-2 label-wrap">
      <div class="col-md-4 label-wrap">
        <h1 class="header-label">Online-Marketing</h1>
        <ul class="li-wrap">
          <li class="hide-me add-btn point">Website</li>
          <li class="hide-me add-btn point">Social Media</li>
          <li class="hide-me add-btn point">Digitale Präsentation</li>
        </ul>
      </div>

      <div class="col-md-4 label-wrap">
        <h1 class="header-label">Virtuelle Welten</h1>
        <ul class="li-wrap">
          <li class="hide-me add-btn point">Visualisierung</li>
          <li class="hide-me add-btn point">Virtuelle Begehung</li>
          <li class="hide-me add-btn point">Augmented Reality</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以通过在当前 .label-wrap 元素中使用 .active class 检查 li 元素的数量并将 class 设置为 on h1 相应地使用 toggleClass()。试试这个：

$(".add-btn").click(function() {
    var $li = $(this).toggleClass("hide-me added");
    var $wrap = $li.closest('.label-wrap');
    $wrap.find('h1').toggleClass('top-added', $wrap.find('.added').length > 0)
});

Working example

添加Class到header <h1>如果li有Class

addClass to header <h1> if li has Class

jquery

parent

addclass