Javascript 从变量中取出并使用此属性指定给此属性

创建了一个函数，并希望将其转换为独立模块或如您所说的OOP

移动carlist并创建为全局变量

我想要console.log数据名，并在上面的变量处定义。如果我将dataname移到这个之外，则.attr会给我一个错误

我想缩短这个函数，有什么最佳实践的想法吗

JavaScript/Jquery代码

(function(){
var el = $('#cartlist');
dataname = $(this).attr("data-name");
    el.on('click', '.add-one', function(event){
        shoppingCart.addIteamToCart(dataname, "description", 0, "image_url", 1);
        displaylistCartItems();
    });

    el.on("click", ".delete-button", function(event){

       shoppingCart.removeIteamFromCartAll(dataname);
       displaylistCartItems();
    });
    el.on("click", ".delete-one", function(event){
        shoppingCart.removeIteamFromCart(dataname);
        displaylistCartItems();
    });
    $("#cartlist").on("change", ".item-count",  function(event){
        var count = Number($(this).val());
        shoppingCart.setCountForItem(dataname, count);
    });
})();

// JQuery 
$(".add-to-cart").click(function(event){
    event.preventDefault();
    var title = $(this).attr("data-title");
    var description = $(this).attr("data-description");
    var price = Number($(this).attr("data-price"));
    var image_url = $(this).attr("data-image_url");
    shoppingCart.addIteamToCart(title, description, price, image_url, 1);
    displaylistCartItems();
});
$("#clear-cart").click(function(event){
    shoppingCart.clearCart();
    displaylistCartItems();
});




function displaylistCartItems() {
    var cartArray = shoppingCart.listCartItems();
    var output = "";
    for (var i in cartArray) {
        output += "<li>"
        +cartArray[i].title
        +" <input class='item-count' style='height: 39px' type='number' data-name='"
        +cartArray[i].title
        +"' value='"+cartArray[i].count+"' >"
        +" x "+cartArray[i].price
        +" = "+cartArray[i].total
        +" <button class='add-one' data-name='"+cartArray[i].title+"'>+</butto>"
        +" <button class='delete-one' data-name='"+cartArray[i].title+"'>-</butto>"
        +" <button class='delete-button' data-name='"
        +cartArray[i].title+"'>X</button>"
        +"</li>"
    }
    $("#cartlist").html(output);
    $("#total-cart").html( shoppingCart.totalCart() );
    console.log(shoppingCart.countCart());
    $("#total-cart-count").html( shoppingCart.countCart() );    
    };
displaylistCartItems();

（函数（）{
var el=$（“#cartlist”）；
dataname=$（this.attr（“数据名”）；
el.on（'单击'，'添加一个'，函数（事件）{
shoppingCart.addIteamToCart（数据名，“描述”，0，“图像url”，1）；
displaylistCartItems（）；
});
el.on（“点击“，”删除按钮），功能（事件）{
shoppingCart.removieteamfromcartall（dataname）；
displaylistCartItems（）；
});
el.on（“单击“，”。删除一个”，功能（事件）{
shoppingCart.removieteamfromcart（dataname）；
displaylistCartItems（）；
});
$（“#cartlist”）。关于（“更改”，“项目计数”，函数（事件）{
var count=Number（$（this.val（））；
shoppingCart.setCountForItem（数据名，计数）；
});
})();
//JQuery
$（“.add to cart”）。单击（函数（事件）{
event.preventDefault（）；
var title=$（this.attr（“数据标题”）；
var description=$（this.attr（“数据描述”）；
var价格=数字（$（此）.attr（“数据价格”）；
var image_url=$（this.attr（“data-image_url”）；
shoppingCart.addIteamToCart（标题、描述、价格、图片url、1）；
displaylistCartItems（）；
});
$（“#清除购物车”）。单击（功能（事件）{
shoppingCart.clearCart（）；
displaylistCartItems（）；
});
函数displaylistCartItems（）{
var cartArray=shoppingCart.listCartItems（）；
var输出=”；
for（数组中的变量i）{
输出+=“
”
+cartArray[i].标题
+" "
+“x”+cartArray[i]。价格
+“=”+cartArray[i]。总计
+" +"
+" -"
+“X”
+“
”
}
$（“#cartlist”）.html（输出）；
$（“#total cart”）.html（shoppingCart.totalCart（））；
log（shoppingCart.countCart（））；
$（“#购物车总数”）.html（shoppingCart.countCart（））；
};
displaylistCartItems（）；

---

链接到plunker:

首先，您在第一个函数中传递一个变量，然后用另一个函数覆盖它，这就是造成混淆的原因

试试这个：

(function(){
var el = $('#cartlist');
var dataname = $(this).attr("data-name");
el.on('click', '.add-one', function(event){
    shoppingCart.addIteamToCart(dataname, "description", 0, "image_url", 1);
    displaylistCartItems();
});

el.on("click", ".delete-button", function(event){
   shoppingCart.removeIteamFromCartAll(dataname);
   displaylistCartItems();
});
el.on("click", ".delete-one", function(event){
    shoppingCart.removeIteamFromCart(dataname);
    displaylistCartItems();
});
})();

---

我不确定您想要实现什么，但每次在这些类上触发“单击”时，您都会覆盖相同的变量。

我想让代码更简单。目前我有dataname=$（this.attr（“数据名”）；重复3次。如果我将该行作为变量传递到函数中，我可以删除该行。您只需在单击事件之外对其进行初始化，我已经更新了我的回答。这就是我所做的，但当我单击“添加”按钮、“删除”按钮时，它已删除/添加到其他列表项。未选择正确的列表项。我已经更新了代码