Question

我有一个产品图库页面，我想要启用两个选项，当点击fav按钮时，fav计数器获得+1，当点击购物车按钮时，购物车计数器获得+1值。当我只使用addToCart函数时，它工作正常，但是当我添加一个新函数，添加到favs，它不显示网格，只有网格加载器出现.. 这是我的HTML标记

<div>
    <button class="aka-fav">
        <i class="aka-fav-icon fa fa-heart-o"></i>
        <span class="aka-text-hidden">Favoriler</span>
        <span class="aka-fav-count">0</span>
    </button>
    <button class="aka-cart">
        <i class="aka-cart-icon fa fa-shopping-cart"></i>
        <span class="aka-text-hidden">Sepet</span>
        <span class="aka-cart-count">0</span>
    </button>
</div>

JS就在这里

        // filter ctrls
        filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-fav')),
        // fav
        fav = document.querySelector('.aka-fav'),
        favItems = fav.querySelector('.aka-fav-count');

        filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-buy')),
        // cart
        cart = document.querySelector('.aka-cart'),
        cartItems = cart.querySelector('.aka-cart-count');
      -------
      -------
      -------
      -------
      function initEvents() {
        filterCtrls.forEach(function(filterCtrl) {
            filterCtrl.addEventListener('click', function() {
                classie.remove(filterCtrl.parentNode.querySelector('.aka-filter-item-selected'), 'aka-filter-item-selected');
                classie.add(filterCtrl, 'aka-filter-item-selected');
                iso.arrange({
                    filter: filterCtrl.getAttribute('data-filter')
                });
                recalcFlickities();
                iso.layout();
            });
        });

        // window resize / recalculate sizes for both flickity and isotope/masonry layouts
        window.addEventListener('resize', throttle(function(ev) {
            recalcFlickities()
            iso.layout();
        }, 50));

        [].slice.call(grid.querySelectorAll('.aka-grid-item')).forEach(function(item) {
        // add to favlist
            item.querySelector('.aka-action-fav').addEventListener('click', addToFav);
        // add to cart
            item.querySelector('.aka-action-buy').addEventListener('click', addToCart);
        });
    }

    function addToFav() {
        classie.add(fav, 'aka-fav-animate');
        setTimeout(function() {favItems.innerHTML = Number(favItems.innerHTML) + 1;}, 200);
        onEndAnimation(favItems, function() {
            classie.remove(fav, 'aka-fav-animate');
        });
    }

    function addToCart() {
        classie.add(cart, 'aka-cart-animate');
        setTimeout(function() {cartItems.innerHTML = Number(cartItems.innerHTML) + 1;}, 200);
        onEndAnimation(cartItems, function() {
            classie.remove(cart, 'aka-cart-animate');
        });
    }

    function recalcFlickities() {
        for(var i = 0, len = flkties.length; i < len; ++i) {
            flkties[i].resize();
        }
    }

    init();

Answer 1

谢谢，我找到了原因，取代了这部分;

// filter ctrls
        filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-fav')),
        // fav
        fav = document.querySelector('.aka-fav'),
        favItems = fav.querySelector('.aka-fav-count');

        filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-buy')),
        // cart
        cart = document.querySelector('.aka-cart'),
        cartItems = cart.querySelector('.aka-cart-count');

用这个：

// filter ctrls
            filterCtrls = [].slice.call(document.querySelectorAll('.aka-filter > .aka-fav')),
            // fav
            fav = document.querySelector('.aka-fav'),
            favItems = fav.querySelector('.aka-fav-count');
            // cart
            cart = document.querySelector('.aka-cart'),
            cartItems = cart.querySelector('.aka-cart-count');

仍然无法正常工作，然后想出那里的分号并用逗号替换它。现在它完美无缺。

favItems = fav.querySelector('.aka-fav-count'), //this semicolon to comma
                // cart
                cart = document.querySelector('.aka-cart'),

JS addToCart和addToFavs不能同时工作

1 个答案: