Jquery to trigger class change

Question

Tad new to this jQuery thing. This is the code that the software we use spits out and I cannot change the code. So I have to use jQuery to manipulate it to what I want.

<div class="responseItem">

    <span class="response_text">yes</span>
    <div style="clear:both"></div>
</div>

<div class="responseItem">

    <span class="response_text">no</span>
    <div style="clear:both"></div>
</div>

When you select a option it will add a class called selected like this:

<div class="responseItem selected">

    <span class="response_text">yes</span>
    <div style="clear:both"></div>
</div>

I added jQuery to get my icon I want like this as a default icon:

$("span.response_text").prepend('<i class="fa fa-circle-o">&nbsp;</i>');

So your code is now like this when viewed in browser:

<div class="responseItem">
   <span class="response_text">
      <i class="fa fa-circle-o"> </i>
        yes
   </span>
   <div style="clear:both"></div>
</div>

It will give you a permanent circle icon which is perfect. I now want it to change icons dependant on if it is selected or not. So the default will be fa-circle-o and when selected it will change to fa-dot-circle-o

$("span.response_text").click(function(){
    $("i").removeClass("fa-circle-o").addClass("fa-dot-circle-o");
});

This kind of works but then changes both icons to this so I am kind of getting there but not sure if the .click is the right way to go?

I basically need it to change the icon class as soon as the div class responseItem selected event happens.

Any help will be so much appreciated.

Thank you

NibblyPig · Accepted Answer · 2015-08-06 08:55:12Z

2

If I understand correctly, there are multiple items on the page with the <i> tag. Therefore I'd suggest:

$("i.fa-circle-o").removeClass("fa-circle-o").addClass("fa-dot-circle-o");

This will ensure it only replaces the 'selected' item.

Otherwise, you will have to alter your $("i") selector to something more specific, as it will hit every <i> on the page.

Here is a JS fiddle demonstrating a more complete solution:

http://jsfiddle.net/2otd1mh5/

$(document).ready(function () {
    $("span.response_text").prepend('<i class="fa fa-circle-o">&nbsp;</i>');
});

$("span.response_text").click(function(){
    var dotItems = $('i.fa-dot-circle-o');

    $(this).find('i').removeClass("fa-circle-o").addClass("fa-dot-circle-o");

    dotItems.removeClass("fa-dot-circle-o").addClass("fa-circle-o");
});

edited Aug 6, 2015 at 8:55

answered Aug 5, 2015 at 15:20

NibblyPig

53.3k76 gold badges222 silver badges385 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

VincentVisser Over a year ago

This just replaces fa-circle-o wih fa-dot-circle-o but does not toggle between them. Is there a way to once the div.selected is triggered to change the icon to the one I want?

NibblyPig Over a year ago

I'm really not sure what your question is asking, so I have created a jsfiddle and added it to the answer. Can you look at it and see if that's what you're trying to do?

VincentVisser Over a year ago

Yes. Perfect. Sorry if I confused you

John R · Accepted Answer · 2015-08-05 17:45:32Z

0

After adding the class selected to the div.responseItem, manually raise an custom event as per the following code snippet.

Code snippet:

$("div.responseItem").addClass("selected").trigger('classChanged');

And define the custom classChanged event for div.selected like this to change your icon's class.

$(document).on('classChanged',"div.selected", function() {
     $("i").removeClass("fa-circle-o").addClass("fa-dot-circle-o");
});

Hope this helps you!

edited Aug 5, 2015 at 17:45

answered Aug 5, 2015 at 17:37

John R

2,8212 gold badges16 silver badges33 bronze badges

2 Comments

VincentVisser Over a year ago

The selected is something that gets triggered by jquery that I have no controll over. Its something that the software adds in automatic. any way to still trigger the icon change?

John R Over a year ago

I couldn't understand you. Please tell us the exact situation. when you want to change your icon's class.

Collectives™ on Stack Overflow

Jquery to trigger class change

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related