去掉变量，并使用它来分配给该属性

Taking out of the variable and using this to assign to this attribute

本文关键字：分配 属性 变量      更新时间：2023-09-26

创建了一个函数，并希望将其转换为独立模块或OOP。

  1. 移动carlist并创建为一个全局变量
  2. 我想console.log数据名，并在上面的一个变量中进行定义。如果我将数据名称移到这个之外，.attr会给我一个错误
  3. 我想缩短这个函数，有什么最佳实践的想法吗

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();

链接到plunker：https://plnkr.co/edit/IGpJiosj0siFBXcbLxsq?p=preview

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

试试这个：

(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();
});
})();

我不确定你想要实现什么，但每次你触发对这些类的"点击"，你都会覆盖同一个变量。

相关文章：