从所有中删除类并添加到单击一个

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

HTML，如果需要

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

7 个解决方案

#1

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

#2

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.

通过使用单独的函数，您将丢失对当前对象的引用（this）。您需要使用参数来实现工作。

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

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

#3

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

#4

How about this:

这个怎么样：

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

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

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

#5

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

function pager(that) {

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

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

#6

Editable JSFiddle

可编辑的JSFiddle

HTML

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

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

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
首先，我使用$（“。pagination div”）删除所有活动类.removeClass（“active”）;这实际上对所有子div应用此效果
then, I use the element passed through parameter to the function to scope it, and be able to add the proper class
然后，我使用通过参数传递的元素来扩展它的范围，并能够添加适当的类

#7

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

对所有元素使用id，然后将活动类添加到已单击的每个元素或使用e.target，这将跟踪当前元素

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

#1