I am writing a function where I want to remove an active class from all elements and add it to the one which was just clicked. Problem is that when I click the element all of them get the active class. Please see the code below.

var pagination = $('.pagination div');

function pager() {
    pagination.removeClass('active', function(){
        $(this).addClass('active');
    });
}

$('.pagination div').on("click", function (){
    pager();
});

I could use the code below, which works actually, but the reason I want to use the above one is to have possibility adding other functions in it which will be called later on click.

$('.pagination div').on('click',function(){
  $('.pagination div').removeClass('active');
  $(this).addClass('active');
});

HTML if needed

<div class="pagination">
    <div class="pagination1"></div>
    <div class="pagination2"></div>
    <div class="pagination3"></div>
    <div class="pagination4"></div>
</div>

I am writing a function where I want to remove an active class from all elements and add it to the one which was just clicked. Problem is that when I click the element all of them get the active class. Please see the code below.

var pagination = $('.pagination div');

function pager() {
    pagination.removeClass('active', function(){
        $(this).addClass('active');
    });
}

$('.pagination div').on("click", function (){
    pager();
});

I could use the code below, which works actually, but the reason I want to use the above one is to have possibility adding other functions in it which will be called later on click.

$('.pagination div').on('click',function(){
  $('.pagination div').removeClass('active');
  $(this).addClass('active');
});

HTML if needed

<div class="pagination">
    <div class="pagination1"></div>
    <div class="pagination2"></div>
    <div class="pagination3"></div>
    <div class="pagination4"></div>
</div>

• javascript
• jquery
• html

• The fact you don't aim the function to a particular element make this function un scopable, which means you don't have any information of which element in particular you clicked. – Anwar Commented Sep 3, 2015 at 12:21
• Setup a second on listener. You'll have many functions assigned to one click – Unamata Sanatarai Commented Sep 3, 2015 at 12:21

7 Answers 7

By using a separate function, you are losing your reference to the current object (this). You will need to use a parameter to get your way working.

function pager(element) {
    pagination.removeClass('active', function(){
        element.addClass('active');
    });
}

$('.pagination div').on("click", function (){
    pager($(this));
});

I want to use the above one is to have possibility adding other functions in it which will be called later

Try this:

function pager(el) {
    pagination.removeClass('active', function(){
        $(el).addClass('active');
    });
}

$('.pagination div').on("click", function (){
    pager(this);
});

$('div.pagination').on('click', 'div', function(){
     $(this).addClass('active').siblings().removeClass('active');
});

How about this:

var pagination = $('.pagination div');

function pager(selector) {
    $('.pagination div').removeClass('active');
    $(selector).addClass('active');
}

$('.pagination div').on("click", function (){
    pager(this);
});

var pagination = $('.pagination div');

function pager(that) {

    pagination.removeClass('active', function(){
       that.addClass('active');
    });
}

$('.pagination div').on("click", function (){
    pager($(this));
});

Editable JSFiddle

HTML

<div class="pagination">
<div class="pagination1">Pagination 1</div>
<div class="pagination2">Pagination 2</div>
<div class="pagination3">Pagination 3</div>
<div class="pagination4">Pagination 4</div>

JavaScript

$(function() { // DOM loaded event handler
    function pager (element) {
        $(".pagination div").removeClass("active");
        element.addClass("active");
    }

    $(".pagination div").click(function() {
        var element = $(this);

        pager(element);
    });
});

CSS

.active {
   color : red;
}

I used your function in 2 steps :

• First, I remove all active class by using $(".pagination div").removeClass("active"); which actually apply this effect on all sub div
• then, I use the element passed through parameter to the function to scope it, and be able to add the proper class

Use id for all the element then add active class to each element which has been click or use e.target this will track the current element

 $('.pagination').click(function(e){
    $('.pagination').removeClass('active');
    $(e.target).addClass('active');
});