Jquery switch class on click event

Question

I have the folowing example:

<div class="filtrer">
    <a class="bold">Url 1</a>
    <a>Url 2</a>
</div>

First url is active, second is inactive, bold means is selected. I should be allowed to press only on Url 2, and as soon as i do that, the bold class shoud switch to the Url 2.

What i already tryed and did not work was this:

$('.filtrer a').filter(':not(.bold)').on('click', function(){
    var current = $('.filtrer a').filter(':not(.bold)');
    var standby = $('.filtrer a.bold');

    current.addClass('bold');
    standby.removeClass('bold');
})

Does anybody know why this is not working? Or have an optimized solution? Thanks

Does it work if you change $('.filtrer a') to $('.filter a')? — lamflam
– lamflam, Commented Nov 14, 2013 at 15:56
What about the single quote / double quote on your bold anchor? — Elliott Frisch
– Elliott Frisch, Commented Nov 14, 2013 at 16:02

Arun P Johny · Accepted Answer · 2013-11-14 16:00:49Z

5

You are dealing with dynamic element selectors, so you need to use delegation based event handlers

var $as = $('.filter a');
$('.filter').on('click', 'a:not(.bold)', function () {
    var current = $as.filter(':not(.bold)');
    var standby = $as.filter('.bold');

    current.addClass('bold');
    standby.removeClass('bold');
})

Demo: Fiddle

It can be written as

var $as = $('.filter a');
$('.filter').on('click', 'a:not(.bold)', function () {
    $as.toggleClass('bold');
})

Demo: Fiddle

edited Nov 14, 2013 at 16:00

answered Nov 14, 2013 at 15:55

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Phil Over a year ago

+1 on the second solution, the first one is pointless and too much code.

Arun P Johny Over a year ago

@Phil that was to correct the OP's code.... and was the first solution before I cleaned it up.... so kept it there

Roko C. Buljan · Accepted Answer · 2013-11-14 16:09:15Z

1

$('.filter').on('click','a:not(.bold)',function(){
  $(this).siblings().add(this).toggleClass('bold');
});

Or without jQuery:

<div class="filter">
  <input type="radio" name="url" id="url1"><label for="url1">url1</label>
  <input type="radio" name="url" id="url2"><label for="url2">url2</label>
</div>

.filter input[type=radio]{
  display:none;
}
.filter input[type=radio]:checked + label{
  font-weight:bold;
}

Example 1 Example 2

answered Nov 14, 2013 at 16:09

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

BuysDB · Accepted Answer · 2013-11-14 15:56:15Z

0

You misspelled "filter", change it in your code or the HTML.

answered Nov 14, 2013 at 15:56

BuysDB

1431 silver badge8 bronze badges

Comments

Ankit Tyagi · Accepted Answer · 2013-11-14 15:57:21Z

0

$('.filtrer').on('click',' a:not(.bold)', function(){    
    $('.filtrer a.bold').removeClass('bold');;
    $(this).addClass('bold');    
})

answered Nov 14, 2013 at 15:57

Ankit Tyagi

2,37511 silver badges20 bronze badges

Comments

Franck · Accepted Answer · 2013-11-14 15:59:13Z

0

Something like :

$('.filter a').click(function() {
    $('.filter a').removeClass('bold');
    $(this).addClass('bold');
});

?

answered Nov 14, 2013 at 15:59

Franck

1604 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery switch class on click event

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related