如何在从angularjs函数检索的按钮上使用jQuery函数

我使用

ng click

指令为按钮的单击事件指定了一个角度函数。我将

$event

对象传递给它，以便检索单击的按钮。使用

$event.currentTarget

检索按钮后，我想使用

.closest（'.parentDiv'）

获取父元素，并使用

.find（'.item id'）

在该元素内搜索

我有以下代码，但它给我一个错误，说

。find（）

不是函数：

$scope.addToCart = function ($event) {
    var itemId;
    var qty;
    var btn = $event.currentTarget;
    itemId = btn.closest('.parentDiv').find('.item-id').val();        
};

---

提前感谢。

您的代码为您提供了

。find（）不是函数

，因为您试图在DOM元素中使用jQuery方法

---

为了使用jQuery方法，您需要一个jQuery对象，

$event.currentTarget

返回一个DOM元素，而不是jQuery对象

如果您有一个包含DOM元素的变量（

btn

），您可以用一种简单的方式将其强制转换为jQuery对象：

$（YourdElement）

所以你换衣服就可以了

btn.closest('.parentDiv').find('.item-id')

到

---

代码为您提供了

。find（）不是函数

，因为您试图在DOM元素中使用jQuery方法

---

为了使用jQuery方法，您需要一个jQuery对象，

$event.currentTarget

返回一个DOM元素，而不是jQuery对象

如果您有一个包含DOM元素的变量（

btn

），您可以用一种简单的方式将其强制转换为jQuery对象：

$（YourdElement）

所以你换衣服就可以了

btn.closest('.parentDiv').find('.item-id')

到

---

解决这个问题的更真实的角度方法是按照我在评论中的建议，使用一个表示项目的对象数组，以ng重复显示它们。当您单击调用addToCart的按钮时，您应该将整个项目传递到函数中，并且您可以访问它的所有属性（即价格、id等）

下面是基本代码的样子：

var-app=angular.module（“myApp”，[]）
.controller（“myCtrl”，函数（$scope）{
$scope.shoppingCart=[]；
$scope.items=[{
id:1，
价格：1.49，
数量：0，
名称：“汤”
}, {
id:2，
价格：4.75，
数量：0，
名称：“鸡”
}, {
id:3，
价格:2.29，
数量：0，
名称：“牛肉干”
}, {
id:4，
价格:3.00,，
数量：0，
名称：“沙拉”
}, {
id:5，
价格:0.99，
数量：0，
名称：“鳄梨”
}];
$scope.getCartTotal=函数（）{
return$scope.shoppingCart.reduce（函数（sum，curr）{
退货金额+（数量（当前数量）*当前价格）；
}, 0);
};
$scope.removeFromCart=函数（cartItem）{
var item=$scope.items[$scope.items.indexOf（cartItem）]；
项目数量=0；
$scope.shoppingCart.splice（$scope.shoppingCart.indexOf（cartItem），1）；
};
$scope.addToCart=函数（项，项形式）{
var newQuantity=编号（itemForm.Quantity.$viewValue）；
var itemIndex=-1；
$scope.shoppingCart.some（函数（元素、索引）{
if（elem.id==item.id）{
itemIndex=索引；
返回true；
}
});
如果（itemIndex>-1）{
var currItem=$scope.shoppingCart[itemIndex]；
currItem.quantity=新数量；
}否则{
item.quantity=新增数量；
$scope.shoppingCart.push（项目）；
}
};
});

项目
名称：{{item.Name}

价格：{{item.Price | currency}}

数量：




添加到购物车

购物车
名称：{{item.Name}

数量：{{item.Quantity}

总价：{（item.Price*item.quantity）|货币}
去除



总计#项：{{shoppingCart.length}

总计：
解决这个问题的更真实的角度方法是按照我在评论中建议的那样做，即使用一个表示项目的对象数组，以ng重复显示它们。当您单击调用addToCart的按钮时，您应该将整个项目传递到函数中，并且您可以访问它的所有属性（即价格、id等）

下面是基本代码的样子：


var-app=angular.module（“myApp”，[]）
.controller（“myCtrl”，函数（$scope）{
$scope.shoppingCart=[]；
$scope.items=[{
id:1，
价格：1.49，
数量：0，
名称：“汤”
}, {
id:2，
价格：4.75，
数量：0，
名称：“鸡”
}, {
id:3，
价格:2.29，
数量：0，
名称：“牛肉干”
}, {
id:4，
价格:3.00,，
数量：0，
名称：“沙拉”
}, {
id:5，
价格:0.99，
数量：0，
名称：“鳄梨”
}];
$scope.getCartTotal=函数（）{
return$scope.shoppingCart.reduce（函数（sum，curr）{
退货金额+（数量（当前数量）*当前价格）；
}, 0);
};
$scope.removeFromCart=函数（cartItem）{
var item=$scope.items[$scope.items.indexOf（cartItem）]；
项目数量=0；
$scope.shoppingCart.splice（$scope.shoppingCart.indexOf（cartItem），1）；
};
$scope.addToCart=函数（项，项形式）{
var newQuantity=编号（itemForm.Quantity.$viewValue）；
var itemIndex=-1；
$scope.shoppingCart.some（函数（元素、索引）{
if（elem.id==item.id）{
itemIndex=索引；
返回true；
}
});
如果（itemIndex>-1）{
var currItem=$scope.shoppingCart[itemIndex]；
currItem.quantity=新数量；
}否则{
item.quantity=新增数量；
$scope.shoppingCart.push（项目）；
}
};
});

项目
名称：{{item.Name}
angular.element($event.currentTarget)