jQuery“this”范围问题

jQuery `this` scope issue

本文关键字：范围 问题 this jQuery      更新时间：2023-09-26

我在一个地方定义了一个全局函数：

function addToCart (){
    var prodText = $(this).parent().siblings(".item1").text();
    $("#"+prodId+"shopC").children(".item1").text(prodText);
    alert(prodText);
}

然后，我想在具有内联onClick事件的HTML元素中调用它：onClick='addToCart()'

它不起作用，但如果我将函数代码直接放在onClick事件中，它会起作用，所以这一定是this范围的问题。关于this范围有很多问题/解释，但我必须承认，我错过了这个特定案例的简单直接答案（我也尝试过成功地使用"use strict"）。如何做到这一点？

根据当前实现，this没有引用调用函数的元素。它是指window对象。

您需要将当前元素上下文（即this）作为传递给函数

onClick='addToCart(this)'

并修改函数以接受元素作为参数。

function addToCart (elem){
    var prodText = $(elem).parent().siblings(".item1").text();
    $("#"+prodId+"shopC").children(".item1").text(prodText);
    alert(prodText);
}

基本上，普通函数内的this将指向window。您必须将this上下文传递给内联处理程序onClick='addToCart(this)'。接收它并在事件处理程序中使用它，如下所示。

function addToCart (_this){
  var prodText = $(_this).parent().siblings(".item1").text();

您必须在内联调用addToCart函数时传递此关键字，然后才能捕获元素

onClick='addToCart(this)'
函数中的this对象不指向添加了onClick函数的对象，而是指向window对象。

您需要将this作为参数传递给您的函数。

function addToCart (trigger) { // Code goes here }

并在您的onClick中呼叫addToCart(this)。

在javascript中了解更多关于this的信息。

相关文章：