Buntstiftmuffin Buntstiftmuffin - 4 months ago 11
Javascript Question

jQuery: Filter classes and search for element with same class



$("#add-btn-text").click(function(){
var $that = $(this),
classes = $that.attr('class'),
theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),

$boxWithSameClass = $(".li."+theDynamicClass);

$boxWithSameClass.toggleClass("hide-me 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);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>

<body>

<div class="col-md-4 label-wrap">
<h1 class="top-service">header</h1>
<ul class="li-wrap">
<li class="hide-me add-btn point dynamicClass1" id="1a">lorem 1</li>
<li class="hide-me add-btn point dynamicClass2">lorem 2</li>
<li class="hide-me add-btn point dynamicClass3">lorem 3</li>
</ul>
</div>


<div class="row row-centered">
<div class="col-md-4 col-centered service-detail">
<h2>lorem 1</h2>
<h3>subhead</h3>
<p>some text</p>
</div>
<div class="col-md-2 col-centered service-detail service-pos">
<ul class="service-btn-2">
<li><button type="button" class="btn btn-primary" id="add-btn-text" data-dynamicclass="dynamicClass1">add</button></li>
<li><button type="button" class="btn btn-primary">other button</button></li>
</ul>
</div>
</div>

</body>
</html>





I have several div's with buttons. On click each button should add a class to a li with the same class like the button.

I searched and found a solution, which I think would fit, but I can't get it to work.

The Jquery-Code:

$("#add-btn-text").click(function(){
var $that = $(this),
classes = $that.attr('class'),
theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),

$boxWithSameClass = $(".li."+theDynamicClass);

$boxWithSameClass.toggleClass("hide-me added");
});


As I understand it, if u click on the button, the dynamic class filters out the other classes and leaves only the "dynamic" one, which is different on each button. Next the boxWithSameClass identifies the li in an other div, which has the same "dynamic" class and adds/removes the wanted/not-wanted class to/from the li.

Am I right? I don't understand, why it is not working.

HTML-Code BUTTON:

<div class="col-md-2 col-centered service-detail service-pos">
<ul class="service-btn-2">
<li><button type="button" class="btn btn-primary exp" id="add-btn-text">Hinzufügen</button></li>
<li><button type="button" class="btn btn-primary">Details</button></li>
</ul>
</div>
</div>


HTML-Code LIST:

<div class="col-xs-12">
<ul>
<li class="exp">Exposés</li>
<li>Textdesign</li>
<li>Anzeigenkampagnen</li>
<li>Geschäfts- und Presseberichte</li>
<li>Bautafelgestaltung</li>
<li>Außenwerbung</li>
</ul>
</div>


CSS:

.hide-me {color:rgba(0,0,0,0.1);}
.added {color:rgba(0,0,0,1);}
.top-added {color: rgba(0,170,200,1);}


In addition, what I am trying to do is:

The user can click different li's, which will be highlighted. ALL highlighted li shall be transfered by a form. That means, a customer wants an exposé, so he clicks on exposé, which is now visible.
Now, the customer fills out the bystanding form and sends it. EVERY highlighted li should be send with it.

Is this possible? I am not sure what I should search for to find a thread about this topic.
This is only an additional question. Would be glad if someone could give me a hint. ;)

Answer

Try This JS FIddle

$('.service-btn-2').on('click','button', function(){
    var btn_class =  $(this).attr('class').split(" ");
$('.whatever').find('.'+btn_class[0]).toggleClass("hide-me"); 

});

On click on button you wanted to toggle a class to li with same class. If it is not correct, Please correct me :)

Comments