CODEWITHSUNDEEP
javascriptjquery
Pete Tong
Pete Tong

Reputation: 51

jquery add and remove classes

I have a navigational menu now how can i add a selected class after click to any of my spans and remove selected class from previous span using Jquery.

<div class="large-12 columns TSCSlot">
    <div class="large-10 columns DayRow">
        <div class="large-12 columns left DaySelected">
            <span class="Selected"></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>                      
        </div>
    </div>
</div>

$('div.large-12.columns.left.DaySelected > span').click(function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation; // stop the click from bubbling
    $(this).closest('span').find('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});

span.Selected {
    background-color: #5e9e37 !important;
    color: white !Important;
}

Can anyone point me to what I'm doing wrong?

Upvotes: 0

Views: 102

Answers (4)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

The target of your click is the span, so closest('span') will find itself, so your following find('.selected') will not find the "selected" element:

Try this instead: http://jsfiddle.net/TrueBlueAussie/6pg5as4n/

$(this).closest('.DaySelected').find('.selected').removeClass('selected');
$(this).addClass('selected');

Html:

<div class="large-12 columns TSCSlot">
    <div class="large-10 columns DayRow">
        <div class="large-12 columns left DaySelected">
            <span class="selected"></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>                      
        </div>
    </div>
</div>

Notes:

  • Using closest with .DaySelected will ensure you do not modify other controls on the page. Your could also just use parent() e.g. $(this).parent().find('.selected').removeClass('selected')
  • The second line then just adds the selected class to the clicked span.
  • You have an uppercase S on selected in the html. Have changed that to lowercase s to match the code.
  • You do not appear to need to prevent propagation and spans have no default operation to prevent. e.g. http://jsfiddle.net/TrueBlueAussie/6pg5as4n/1/
  • Instead of e.preventDefault() and e.stopPropagation you can simply return false to do both. e.g. http://jsfiddle.net/TrueBlueAussie/6pg5as4n/2/

Upvotes: 2

Der Vampyr
Der Vampyr

Reputation: 951

Some small improvements:

<span class="Selected"</span> should be <span class="selected"></span>

(small beginning character for classes and > added)

$('div.large-12.columns.left.DaySelected > span').click(function(e) {
  e.preventDefault(); // prevent the default action
  e.stopPropagation; // stop the click from bubbling
  $(this).parent().find('.selected').removeClass('selected'); //removes all selected classes in this div
  $(this).addClass('selected');
});

Your click is binded on the <span>. So if you use jQuery(this) it is actually the span you want to change. So you dont need .parent() .find() or anything else to add the class to it.

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

As You telling in post. You are clicking the current span You can add selected class ,remaining selected class are removed 

$('div.large-12.columns.left.DaySelected > span').click(function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation; // stop the click from bubbling
    $('.Selected').removeClass('Selected');
    $(this).addClass('Selected');
});

NOTE :in css Selected not selected class

DEMO

Upvotes: 1

Kevin Pires
Kevin Pires

Reputation: 125

I think your DOM select is wrong.

$('div.large-12.columns.left.DaySelected > span')

should be

$('div.large-12.columns .left.DaySelected > span')

Upvotes: -2

Related Questions