jQuery добавить класс к кнопке

Я пытаюсь просто добавить класс к кнопке с помощью jQuery. Но ничего не происходит. Зачем?jQuery добавить класс к кнопке

http://jsbin.com/makoxibogeje/2/edit

Это мой код:

<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <p>Press me!</p> 
    <button>Test</button> 
    <button>Fiddle</button> 
</body> 
</html>

CSS:

.spinner { color:red;}

Javascript

var B = { 

    btn: $("button"), 

    addSpinner: function() { 
     B.btn.click(function() { 
      this.addClass('spinner'); 
     }); 
    }, 
}

источник

2014-10-16 hyprstack

'this' является простым элементом DOM -' $ (this) 'является элементом jQuery, который имеет метод' addClass' – tymeJV

Внутри этого click обратного вызова фу nction, this - элемент DOM, а не объект jQuery. Обертывая его, как $(this), следует сделать работу addClass.

var B = { 

    btn: $("button"), 

    addSpinner: function() { 
     B.btn.click(function() { 
      $(this).addClass('spinner'); 
     }); 
    }, 
}

P.S. Вот JSFiddle, чтобы продемонстрировать его работоспособность. Обратите внимание, что вам также необходимо позвонить B.addSpinner(); откуда-нибудь, чтобы подключить обработчики событий кликов.

источник

2014-10-16 13:39:03

Трой есть способ написать функцию, подобную IIFE? Значит, мне не нужно называть его нигде? Или имейте это в виду, что, если у меня есть больше функций в B, мне не нужно их называть индивидуально? – hyprstack

Вот довольно надуманный пример B как именованный IIFE, с добавленной функцией и несколькими экземплярами (в противном случае зачем использовать его именованную функцию?): Http://jsfiddle.net/troygizzi/zwtvqnnx/ –

Вы должны обернуть this переменную JQuery перед вызовом addClass функции

var B = { 

    btn: $("button"), 

    addSpinner: function() { 
     B.btn.click(function() { 
      $(this).addClass('spinner'); // <---- 
     }); 
    }, 
}

источник

2014-10-16 13:39:24 Jerodev

Хотя правильный ответ уже дан по Troy Gizzy но вы можете немного улучшить путем replaceing в B в B.btn.click с this, так же, как этого

var B = { 
 
    btn: $("button"), 
 
    addSpinner: function() { 
 
     this.btn.click(function() { // <-- You've used B.btn.click 
 
      $(this).addClass('spinner'); //<-- You had to use $(this) instead of this 
 
     }); 
 
    }, 
 
}.addSpinner();

.spinner { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <p>Press me!</p> 
 
    <button>Test</button> 
 
    <button>Fiddle</button>

источник

2014-10-16 13:49:20

Спасибо за это! Есть ли способ написать функцию, такую как IIFE? Значит, мне не нужно называть его нигде? Или имейте это в виду, что, если у меня есть больше функций в B, мне не нужно их называть индивидуально? – hyprstack

Добро пожаловать @MMRibot. В моем примере я вызвал метод/функцию напрямую. –

спасибо, я вижу это, но как бы это сделать, если я добавлю больше функций в свой объект? – hyprstack

jQuery добавить класс к кнопке

ответ

Смежные вопросы