JS addToCart 和 addToFavs 不能同时工作
JS addToCart and addToFavs not working same time
我有一个产品图库页面,我想在其中启用两个选项,当点击收藏按钮时,收藏计数器获得 +1,当点击购物车按钮时,购物车计数器获得 +1 值。
当我只为 addToCart 功能做这件事时,它工作正常,但是当我添加一个新功能,添加到收藏夹时,它不显示网格,只显示网格加载器..
这是我的 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();
谢谢,我找到原因了,替换了这部分;
// 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'),
我有一个产品图库页面,我想在其中启用两个选项,当点击收藏按钮时,收藏计数器获得 +1,当点击购物车按钮时,购物车计数器获得 +1 值。 当我只为 addToCart 功能做这件事时,它工作正常,但是当我添加一个新功能,添加到收藏夹时,它不显示网格,只显示网格加载器.. 这是我的 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();
谢谢,我找到原因了,替换了这部分;
// 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'),