Question

我正在编写一个函数，我想从所有元素中删除一个活动类，并将其添加到刚刚单击的那个元素中。问题是，当我点击元素时，所有元素都会获得活动类。请参阅下面的代码。

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

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

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

我可以使用下面的代码，它实际上有效，但我想使用上面的代码的原因是有可能在其中添加其他功能，稍后将在点击时调用。

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

HTML，如果需要

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

Answer 1

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

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

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

Answer 2

我想使用上面的一个是有可能添加其他其中的函数将在稍后调用

试试这个：

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

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

Answer 3

这个怎么样：

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

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

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

Answer 4

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

function pager(that) {

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

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

Answer 5

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

我在两个步骤中使用了你的功能：

首先，我使用active删除所有$(".pagination div").removeClass("active");课程，这实际上会对所有子div应用此效果
然后，我使用通过参数传递给元素的元素来扩展它，并且能够添加适当的类

Answer 6

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

library(data.table)
setDT(df)[, avg:= mean(snakes), by = area]

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

7 个答案: