как переключить класс, вызывающий другую функцию

Question

Это оригинальная функция:

$(document).on('click', '.itemove', function() {
    $('.itemoveact').removeClass('itemoveact');
    $(this).addClass('itemoveact');
});

Теперь я хочу сделать то же самое, вызвав другую функцию:

$(document).on('click', '.itemove', function() {
    swclass('itemoveact');
});

function swclass(c){
    $('.' + c).removeClass(c);
    $(this).addClass(c);
}

Ничего не происходит.Есть проблема с передачей this контекста.

Любая помощь?

Answer 1

Вы можете перепрыгнуть через несколько обручей, чтобы изменить значение this, но проще и проще передать его в качестве аргумента:

$(document).on('click', '.itemove', function() {
    swclass('itemoveact', this);
});

function swclass(c, addTo){
    $('.' + c).removeClass(c);
    $(addTo).addClass(c);
}

Answer 2

В функции swclass

function swclass(c){
   $('.' + c).removeClass(c);
   $(this).addClass(c);
}

this это просто ссылка , которая указывает на window объект.

Одним из решений является использование метода bind.

Метод bind () создает новую функцию, которая при вызове имеет этому ключевому слову присваивается заданное значение с заданной последовательностью аргументы, предшествующие любому, указанному при вызове новой функции.

$(document).on('click', '.itemove', function() {
    swclass.bind(this)('itemove');
});

function swclass(c){
    $('.' + c).removeClass('red');
    $(this).addClass('blue');
}

.red{
  color:red;
}
.blue{
   color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="itemove red">Hello</p>

Answer 3

Попробуйте выполнить

$(document).on('click', '.itemove', function() {
    swclass.bind(this)('itemoveact');
});

function swclass(c){
    $('.' + c).removeClass(c);
    $(this).addClass(c);
}

swclass.bind (это) ( 'itemoveact');

Функция привязки применит область действия вашего «.itemove» к функции swclass, а затем сделает вызов.

Это чтение поможет Какова область видимости переменных в JavaScript?

Answer 4

Вы можете использовать Function.prototype.apply()

$(document).on('click', '.itemove', function() {
   swclass.apply(this, ['itemoveact']);
});