CODEWITHSUNDEEP
jqueryhtmlcss
user592638
user592638

Reputation:

JQuery remove and add span-class

I have two spans with links that a user can click, and when a span is clicked it remove a class and adds another class on the click one:

enter image description here

HTML:

<span class="resCheck label label-success">
  <a data-method="get" class="resCheckLink" href="trafikskola?utf8=%E2%9C%93&amp;query=lund&     
   amp;sort=asc">Cheap prices</a>
</span>
<span class="resCheck label">
  <a class="resCheckLink" data-method="get" href="trafikskola?utf8=%E2%9C%93&query=lund&  
  sort=desc">Expensive prices</a>
</span>

JQuery:

$(function(){
    $('.resCheckLink').click(function(e){
        $('.resCheck.label').removeClass('label-success');
        $(this).parent().addClass('label-success')
    });
});

But it dosent work, it dosent add and remove the classes, how can I fix this?

Upvotes: 0

Views: 7656

Answers (6)

MarmiK
MarmiK

Reputation: 5775

You are removing and adding same class, so you will not be able to monitor actually,

$('.resCheck.label').removeClass('label-success');
    $(this).parent().addClass('label-success');

so Please create another class with different style and then try, with answer given by PSR above.

that will do :)

Upvotes: 0

PSR
PSR

Reputation: 40318

try this

$(function(){
    $('.resCheckLink').click(function(e){
        $('.resCheck').removeClass('label-success');
       $(this).parent().addClass('label-success');
    });
});

Upvotes: 1

Rishi Php
Rishi Php

Reputation: 1418

Try this...

$(function(){
    $('.resCheckLink').click(function(e){
        $('.resCheck').removeClass('label-success');
        $(this).parent().addClass('label-success');
    });
});

Working DEMO

Upvotes: 1

Shivaji Ranaware
Shivaji Ranaware

Reputation: 169

Try this

$(function(){
   $('.resCheckLink').click(function(e){
         $('.resCheck').removeClass('label-success');
         $(this).parent().addClass('label-success')
   });
});

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50149

It does work actually, I imagine you're styling the element incorrectly or something? I added return false to prevent the link functioning.

jsFiddle

$(function(){
    $('.resCheckLink').click(function(e){
        $('.resCheck.label').removeClass('label-success');
        $(this).parent().addClass('label-success');
        return false;
    });
});

Upvotes: 0

msapkal
msapkal

Reputation: 8346

Try this.

$(function(){
    $('.resCheckLink').click(function(e){
        $('span.resCheck').removeClass('label-success');
        $(this).parent().addClass('label-success')
    });
});

Upvotes: 0

Related Questions