Question

我有以下HTML代码

<button id="b">
    Test
</button>

和javascript代码

$("#b").click(function(){
    var name = "test button";
    console.log($(this).name);
});

，但是当我点击按钮时，名称变量不会在控制台上打印

Answer 1

您需要使用：

console.log(name);

因为此处name是变量。

<强> Fiddle Demo

如果您想获得该按钮的id值，请使用：

console.log(this.id);

Answer 2

在你的函数中，变量name只是一个局部变量。它不是任何对象的属性，所以当你执行$(this).name时，它不是该jQuery对象的属性。

如果您只想将本地变量记录到控制台，您只需使用：

console.log(name);

如果你想将它指定为你对象的属性，那么你就不会创建一个局部变量，而是会这样做：

$("#b").click(function(){
    this.name = "test button";
    console.log(this.name);
});

如果您想要实际更改按钮的文本，那么您可以这样做：

$("#b").click(function(){
    this.innerHTML = "test button";
});

Answer 3

如果你有：

<button id="b" name="test">
    Test
</button>

然后：

$("#b").click(function(){

    console.log($(this).attr("name"));
});

如果您想获得变量值，那么您不需要使用this

然后只需这样做：

$("#b").click(function(){
    var name = "test button";
    console.log(name);
});

Fiddle Example

Answer 4

$（this）引用Object，因为您可以看到该对象中没有name属性尝试调试

console.log(name);

Answer 5

这是因为你的范围不同。 this指的是按钮，而不是刚刚创建的var。请参阅以下示例：

// First we provide a button
<button id="lala">Click</button>

一些Javascript将遵循：

function myObject() {
    this.hello = 'hello';
};

var myObject2 = (function () {
    var hello = 'hello';

    function getHello() {
        return hello;
    };

    return {
        getHello: getHello
    };
})();

// In your case
$('#lala').on('click', function () {
    this.hello = 'hello';

    console.log("I'm a property of the current 'this' : " + this.hello);
    console.log("I'm sent by the button, so in this case I'm the button : ");
    console.log(this);

    // Now lets see what happens if we log the 2 objects
    console.log(myObject.hello);

    var instanceOfObject = new myObject();

    console.log("Now I show you the 'hello'! : " + instanceOfObject.hello);

    // This will not work because it's the revealing module pattern(you can work a kind of with getters and setters). Directly calling 'hello' will not work(it's kind of private).
    console.log(myObject2.hello);

    console.log("Greetings from myObject2 : " + myObject2.getHello());
});

小提琴：http://jsfiddle.net/3WE6W/

如果您想了解有关javascript和populair Revealing module pattern（如myObject2）的更多信息，请阅读以下文章：http://addyosmani.com/resources/essentialjsdesignpatterns/book/

为什么Jquery＆＃34;这＆＃34;没有按预期工作？

5 个答案: