Question

我想要一个带有“按钮文字”的警报

这不起作用：

<button onclick="fun()">button text</button>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
    function fun(){
        alert($(this).html()); //I've also tried $(this).val() and $(this).text()
    }
</script>

但以下方法可以正常工作：

<script>
    function fun(){
        alert("some plain text");
    }
</script>

Answer 1

您要登录的this是Window对象，不能在其上使用innerHTML。而是传递button元素的上下文。

function fun(context) {
  alert($(context).html());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fun(this)">button text</button>

Answer 2

我知道您已经接受了答案，但是您收到的所有答案均未解决您的问题。请考虑以下因素：

on-类型处理程序的HTML属性从一开始就被设计为采用原始JavaScript代码并将该代码包装为一个函数。该函数提供了事件对象，并将上下文设置为关键字this作为接收事件的元素。因此，下面我的解决方案中的第一个按钮是完成您要尝试执行的操作的正确方法。

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Event_handler's_parameters_this_binding_and_the_return_value

可以通过将DOM元素的on-事件属性设置为函数名称来实现相同目的。在第二个按钮示例中可以看到这一点。请注意，使用DOM属性时，将传递事件，并且上下文也会设置DOM元素。

现在，像onclick="fun(this)"及其变体在这些答案工作，其原因是因为被包装，其与执行的功能内的this关键字集的DOM元素的上下文中（正如上文所述）。因此，它是一个调用函数并传递当前上下文的函数，以及一个反模式。

那真的应该回答你的问题。

document.querySelector('#otherButton').onclick = fun;

function fun() {
  alert($(this).html());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="alert($(this).html());">button text</button>
<button id="otherButton">other button</button>

Answer 3

以下作品：

<button onclick="fun(this)">button text</button>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
    function fun(myButton){
        alert($(myButton).html()); //I've also tried $(this).val() and $(this).text()
    }
</script>

在fun中，this将不是您的按钮，因为没有在该按钮上调用fun。

以下内容也适用：

<button onclick="fun.apply(this)">button text</button>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
    function fun(){
        alert($(this).html()); //I've also tried $(this).val() and $(this).text()
    }
</script>

此代码使this以您尝试使用的方式定义。

Answer 4

因为您将fun()作为自由函数而不是方法来调用。作为fun()的函数，this收到设置为全局名称空间的fun。

要以设置为this的{{1}}来呼叫<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="fun.call(this)">button text</button> <script> function fun(){ alert($(this).html()); //I've also tried $(this).val() and $(this).text() } </script>，您应该是特定的，例如：

date

Answer 5

使用本地js事件处理程序不会为jquery提供this上下文。您单击的dom元素可通过

获得

function fun (e) {
  let el = e.target // currentTarget, etc.
}

为什么“ this”关键字在以下html代码中不起作用？

5 个答案: