Buntstiftmuffin Buntstiftmuffin - 4 months ago 15
Javascript Question

addClass to header <h1> if li has Class

I've been fiddling around with my code, but I can't get it to work properly.

I have three lists, each having an h1-header. If one clicks on a li, it toggles the class to highlight it, and I want the header of the list to get an highlighting class.

Till now, every header is getting the class except for the one, which should. Dunno what I am doing wrong... :/

Can anyone help me?

Here's my code:



$(".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

You can achieve this by checking the number of li elements with the .active class within the current .label-wrap element and setting the class on the h1 accordingly using toggleClass(). Try this:

$(".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

Comments