jQuery触发类更改

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

Answer 1

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");
});

Answer 2

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!