JQuery中使用this获取a标签中的文字

Question

我想在点击a标签的时候使用"this"获取这个a标签中的文字"按钮1",但是弹出来的是个空字符串,求指导

<a id="btn" onclick="addTabs()" class="easyui-linkbutton" data-options="" style="width: 100%">按钮1</a>

<script type="text/javascript">
       function addTabs() {
           var text = $(this).text();
           alert(text);
       }
   </script>

弹出如图:

Answer 1

首先说一下你的问题出在哪里:你在a标签里添加了点击事件调用了addTabs()这个函数。并没有传递任何有关a标签的信息过去。此时函数中的this指向的是window

<script>
    function addTabs() {
        var text = $(this).text();
        console.log($(this)) //window对象
    }
</script>

下面是正确的写法：

html:
<a id="btn" onclick="addTabs(this)" class="easyui-linkbutton" data-options="" style="width: 100%">按钮1</a>

javascript:
<script>
    function addTabs(obj) {
        var text = $(obj).text();
        console.log(text);
    }
</script>

Answer 2

兄弟，遇到这种错可以自己先调试下，很好发现原因的。

比如说你这个，很可能是this并没有指向a标签，而是其他对象，你是不是可以输出一下this，看下它是指向谁，然后顺藤摸瓜，一步一步找到原因，解决问题。javascript的this很有意思（坑）的一个点，一步步来，你的印象会深一点，比大家直接给你答案要好。

ps：调试的时候，我比较习惯用console，也建议你用这种方法，你不觉得alert调起来太麻烦了么。。。

Answer 3

这个时候获取的this是window 自然获取不到你的值了

修改如下，通过参数传递过去
<a id="btn" onclick="addTabs(this.innerHTML)" class="easyui-linkbutton" data-options="" style="width: 100%">按钮1</a>
<script type="text/javascript">
    function addTabs(str) {
        alert(str)
        console.log($(this));// window
    }
</script>