Question

我试图使用jQuery简单地向一个按钮添加一个类。但没有任何反应。为什么呢？

这是我的代码：

<!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');
        });
    },
}

Answer 1

在click回调函数中，this是一个DOM元素，而不是jQuery对象。将其包装为$(this)应该会使addClass正常工作。

var B = {

    btn: $("button"),

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

P.S。这是一个JSFiddle来证明它的工作原理。请注意，您还必须从某处调用B.addSpinner();才能连接click事件处理程序。

Answer 2

虽然Troy Gizzy已经给出了正确的答案，但您可以通过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>

Answer 3

在调用this函数

之前，必须使用jQuery包装addClass变量

var B = {

    btn: $("button"),

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

jQuery将类添加到按钮

3 个答案: