我无法使用以下javascript。问题出在“ +”和“-”符号上。对于左边的第一个框,它工作得很好,但是我无法使其与中间或右边的框一起使用。我希望中间和右边的框起作用,就像左边的第一个框一样,因此当我按“ +”时,数量将增加,而当我按“-”时,数量将减少。谢谢!
function incrementQty() {
var value = document.querySelector('input[name="qty"]').value;
var cardQty = document.querySelector(".cart-qty");
value = isNaN(value) ? 1 : value;
value++;
document.querySelector('input[name="qty"]').value = value;
cardQty.innerHTML = value;
cardQty.classList.add("rotate-x");
}
function decrementQty() {
var value = document.querySelector('input[name="qty"]').value;
var cardQty = document.querySelector(".cart-qty");
value = isNaN(value) ? 1 : value;
value > 1 ? value-- : value;
document.querySelector('input[name="qty"]').value = value;
cardQty.innerHTML = value;
cardQty.classList.add("rotate-x");
}
function removeAnimation(e) {
e.target.classList.remove("rotate-x");
}
const counter = document.querySelector(".cart-qty");
counter.addEventListener("animationend", removeAnimation);
$text-color: #2a2a2a;
$bg-color: #f2eee9;
*,
*:before,
*:after {
box-sizing: border-box;
}
@mixin clearfix {
content: '';
display: table;
clear: both;
}
body {
font-family: 'Open Sans', sans-serif;
color: $text-color;
display: flex;
height: 100vh;
align-items: center;
font-size: 14px;
background: $bg-color;
background-size: cover;
}
.container {
position: relative;
width: 100%;
max-width: 280px;
margin: 0 auto;
&:after {
@include clearfix;
}
}
h1 {
display: inline-block;
background-color: $text-color;
color: #fff;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
padding: 4px 20px;
float: left;
}
.item {
background-color: #fff;
padding: 10px;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
border: 1px solid #FFFEFD;
img {
display: block;
margin: auto;
padding: 20px;
width: 180px;
}
h2 {
font-size: 1.1em;
font-weight: normal;
display: block;
border-bottom: 1px solid #ccc;
margin: 10px 0 10px 0;
padding: 0 0 5px 0;
em {
display: block;
line-height: 1.6;
font-size: .8em;
}
}
}
.cart-button {
float: right;
margin: 12px 15px 0 0;
img {
width: 30px;
height: 30px;
margin: 0 auto;
display: block;
color: #888;
}
.cart-qty {
background: #ff5252;
border-radius: 50%;
color: #fff;
display: block;
font-size: .8em;
line-height: 17px;
position: absolute;
text-align: center;
top: 11px;
right: 10px;
height: 17px;
width: 17px;
}
}
.qty-block {
margin-top: 20px;
}
.qty {
float: left;
width: 80px;
margin-right: 10px;
user-select: none;
}
.increment,
.decrement {
.qty_inc_dec & {
float: left;
text-align: center;
width: 30px;
cursor: pointer;
font-size: 1.2em;
line-height: 20px;
height: 25px;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
}
}
.increment {
.qty_inc_dec & {
border-bottom: 0;
line-height: 25px;
}
}
.qty_inc_dec {
float: left;
width: 10px;
height: 50px;
display: inline-block;
}
input[type="text"] {
.qty & {
float: left;
font-family: "Open Sans", sans-serif;
outline: 0;
font-size: 1.2em;
text-align: center;
width: 50px;
height: 50px;
color: $text-color;
line-height: 40px;
border: 1px solid #ccc;
border-right: 0;
}
}
button[type="button"] {
cursor: pointer;
width: 168px;
border: none;
color: $text-color;
background: #fff;
height: 50px;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
transition: all .2s;
border: 1px solid #ccc;
box-shadow: 0 1px 2px #fff;
&:hover {
box-shadow: 0 1px 2px #cbc3ba;
}
&:active,
&:focus {
outline: none;
}
}
.rotate-x {
animation-duration: .6s;
animation-name: rotate-x;
}
@keyframes rotate-x {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
<div class="container">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<i class="increment" onclick="incrementQty()">+</i>
<i class="decrement" onclick="decrementQty()">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="container">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<i class="increment" onclick="incrementQty()">+</i>
<i class="decrement" onclick="decrementQty()">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="container">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<i class="increment" onclick="incrementQty()">+</i>
<i class="decrement" onclick="decrementQty()">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>
答案 0 :(得分:2)
简短的回答是否定的。您无法使用当前设置进行操作。为什么?每个物品都应该有一个唯一的标识符。只需说我们将在您的容器div中附加唯一标识符(因为这似乎是每个项目的父对象)。
当然,我会做不同的操作并添加一个id,但是仅出于演示目的,我将html结构制作为与您的结构最接近。
为您的容器class =“ container-1”添加一个数字/ id作为类。创建dom时自动增加数字
在增量/减量函数中传递数字/ id。这将有助于确定您要使用的控件。
更改查询选择器以在查询选择器子句中获取容器父级 例如var cardQty = document.querySelector('。container-'+ num +'.cart-qty');
然后您就去了。现在正在工作。
function incrementQty(num) {
var targetQtyTextbox= '.container-'+num+' input[name="qty"]';
var value = document.querySelector(targetQtyTextbox).value;
var cardQty = document.querySelector('.container-'+num+' .cart-qty');
value = isNaN(value) ? 1 : value;
value++;
document.querySelector(targetQtyTextbox).value = value;
cardQty.innerHTML = value;
cardQty.classList.add("rotate-x");
}
function decrementQty(num) {
var targetQtyTextbox= '.container-'+num+' input[name="qty"]';
var value = document.querySelector(targetQtyTextbox).value;
var cardQty = document.querySelector('.container-'+num+' .cart-qty');
value = isNaN(value) ? 1 : value;
value > 1 ? value-- : value;
document.querySelector(targetQtyTextbox).value = value;
cardQty.innerHTML = value;
cardQty.classList.add("rotate-x");
}
function removeAnimation(e) {
e.target.classList.remove("rotate-x");
}
const counter = document.querySelector(".cart-qty");
counter.addEventListener("animationend", removeAnimation);
$text-color: #2a2a2a;
$bg-color: #f2eee9;
*,
*:before,
*:after {
box-sizing: border-box;
}
@mixin clearfix {
content: '';
display: table;
clear: both;
}
body {
font-family: 'Open Sans', sans-serif;
color: $text-color;
display: flex;
height: 100vh;
align-items: center;
font-size: 14px;
background: $bg-color;
background-size: cover;
}
.container {
position: relative;
width: 100%;
max-width: 280px;
margin: 0 auto;
&:after {
@include clearfix;
}
}
h1 {
display: inline-block;
background-color: $text-color;
color: #fff;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
padding: 4px 20px;
float: left;
}
.item {
background-color: #fff;
padding: 10px;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
border: 1px solid #FFFEFD;
img {
display: block;
margin: auto;
padding: 20px;
width: 180px;
}
h2 {
font-size: 1.1em;
font-weight: normal;
display: block;
border-bottom: 1px solid #ccc;
margin: 10px 0 10px 0;
padding: 0 0 5px 0;
em {
display: block;
line-height: 1.6;
font-size: .8em;
}
}
}
.cart-button {
float: right;
margin: 12px 15px 0 0;
img {
width: 30px;
height: 30px;
margin: 0 auto;
display: block;
color: #888;
}
.cart-qty {
background: #ff5252;
border-radius: 50%;
color: #fff;
display: block;
font-size: .8em;
line-height: 17px;
position: absolute;
text-align: center;
top: 11px;
right: 10px;
height: 17px;
width: 17px;
}
}
.qty-block {
margin-top: 20px;
}
.qty {
float: left;
width: 80px;
margin-right: 10px;
user-select: none;
}
.increment,
.decrement {
.qty_inc_dec & {
float: left;
text-align: center;
width: 30px;
cursor: pointer;
font-size: 1.2em;
line-height: 20px;
height: 25px;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
}
}
.increment {
.qty_inc_dec & {
border-bottom: 0;
line-height: 25px;
}
}
.qty_inc_dec {
float: left;
width: 10px;
height: 50px;
display: inline-block;
}
input[type="text"] {
.qty & {
float: left;
font-family: "Open Sans", sans-serif;
outline: 0;
font-size: 1.2em;
text-align: center;
width: 50px;
height: 50px;
color: $text-color;
line-height: 40px;
border: 1px solid #ccc;
border-right: 0;
}
}
button[type="button"] {
cursor: pointer;
width: 168px;
border: none;
color: $text-color;
background: #fff;
height: 50px;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
transition: all .2s;
border: 1px solid #ccc;
box-shadow: 0 1px 2px #fff;
&:hover {
box-shadow: 0 1px 2px #cbc3ba;
}
&:active,
&:focus {
outline: none;
}
}
.rotate-x {
animation-duration: .6s;
animation-name: rotate-x;
}
@keyframes rotate-x {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
<div class="container-1">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<i class="increment" onclick="incrementQty(1)">+</i>
<i class="decrement" onclick="decrementQty(1)">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="container-2">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<i class="increment" onclick="incrementQty(2)">+</i>
<i class="decrement" onclick="decrementQty(2)">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="container-3">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<i class="increment" onclick="incrementQty(3)">+</i>
<i class="decrement" onclick="decrementQty(3)">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>
答案 1 :(得分:0)
document.querySelector
仅选择第一个匹配的CSS选择器。
因此,您将要使用document.querySelectorAll
,并将增量/减量处理程序附加到每个数组元素。
答案 2 :(得分:0)
function incrementQty(_this) {
// get All increment button
var increment = document.querySelectorAll(".increment");
// get index click button
var index = [].indexOf.call(increment, _this)
// get qty to index
var value = document.querySelectorAll('input[name="qty"]')[index].value;
// get cart-qty to index
var cardQty = document.querySelectorAll(".cart-qty")[index];
value = isNaN(value) ? 1 : value;
value++;
document.querySelectorAll('input[name="qty"]')[index].value = value;
cardQty.innerHTML = value;
cardQty.classList.add("rotate-x");
}
function decrementQty(_this) {
var decrement = document.querySelectorAll(".decrement");
var index = [].indexOf.call(decrement, _this)
var value = document.querySelectorAll('input[name="qty"]')[index].value;
var cardQty = document.querySelectorAll(".cart-qty")[index];
value = isNaN(value) ? 1 : value;
value > 1 ? value-- : value;
document.querySelectorAll('input[name="qty"]')[index].value = value;
cardQty.innerHTML = value;
cardQty.classList.add("rotate-x");
}
function removeAnimation(e) {
e.target.classList.remove("rotate-x");
}
const counter = document.querySelector(".cart-qty");
counter.addEventListener("animationend", removeAnimation);
$text-color: #2a2a2a;
$bg-color: #f2eee9;
*,
*:before,
*:after {
box-sizing: border-box;
}
@mixin clearfix {
content: '';
display: table;
clear: both;
}
body {
font-family: 'Open Sans', sans-serif;
color: $text-color;
display: flex;
height: 100vh;
align-items: center;
font-size: 14px;
background: $bg-color;
background-size: cover;
}
.container {
position: relative;
width: 100%;
max-width: 280px;
margin: 0 auto;
&:after {
@include clearfix;
}
}
h1 {
display: inline-block;
background-color: $text-color;
color: #fff;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
padding: 4px 20px;
float: left;
}
.item {
background-color: #fff;
padding: 10px;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
border: 1px solid #FFFEFD;
img {
display: block;
margin: auto;
padding: 20px;
width: 180px;
}
h2 {
font-size: 1.1em;
font-weight: normal;
display: block;
border-bottom: 1px solid #ccc;
margin: 10px 0 10px 0;
padding: 0 0 5px 0;
em {
display: block;
line-height: 1.6;
font-size: .8em;
}
}
}
.cart-button {
float: right;
margin: 12px 15px 0 0;
img {
width: 30px;
height: 30px;
margin: 0 auto;
display: block;
color: #888;
}
.cart-qty {
background: #ff5252;
border-radius: 50%;
color: #fff;
display: block;
font-size: .8em;
line-height: 17px;
position: absolute;
text-align: center;
top: 11px;
right: 10px;
height: 17px;
width: 17px;
}
}
.qty-block {
margin-top: 20px;
}
.qty {
float: left;
width: 80px;
margin-right: 10px;
user-select: none;
}
.increment,
.decrement {
.qty_inc_dec & {
float: left;
text-align: center;
width: 30px;
cursor: pointer;
font-size: 1.2em;
line-height: 20px;
height: 25px;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
}
}
.increment {
.qty_inc_dec & {
border-bottom: 0;
line-height: 25px;
}
}
.qty_inc_dec {
float: left;
width: 10px;
height: 50px;
display: inline-block;
}
input[type="text"] {
.qty & {
float: left;
font-family: "Open Sans", sans-serif;
outline: 0;
font-size: 1.2em;
text-align: center;
width: 50px;
height: 50px;
color: $text-color;
line-height: 40px;
border: 1px solid #ccc;
border-right: 0;
}
}
button[type="button"] {
cursor: pointer;
width: 168px;
border: none;
color: $text-color;
background: #fff;
height: 50px;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
transition: all .2s;
border: 1px solid #ccc;
box-shadow: 0 1px 2px #fff;
&:hover {
box-shadow: 0 1px 2px #cbc3ba;
}
&:active,
&:focus {
outline: none;
}
}
.rotate-x {
animation-duration: .6s;
animation-name: rotate-x;
}
@keyframes rotate-x {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
<div class="container">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<!-- incrementQty() => incrementQty(this) -->
<i class="increment" onclick="incrementQty(this)">+</i>
<i class="decrement" onclick="decrementQty(this)">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="container">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<i class="increment" onclick="incrementQty(this)">+</i>
<i class="decrement" onclick="decrementQty(this)">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>
<div class="container">
<h1>Holiday <strong>Deals</strong></h1>
<div class="cart-button">
<img src="http://www.milanmilosev.com/external/codepen/img/cart.png" width="30" height="30">
<span class="cart-qty">1</span> </div>
<div class="item">
<img src="http://www.milanmilosev.com/external/codepen/img/asus.png" alt="">
<h2>ASUS E200HA-UB02-GD<em>Intel Quad-Core 4GB RAM 32GB Storage</em></h2>
<p>Price: <em>$439.12</em></p>
<div class="qty-block">
<div class="qty">
<input type="text" name="qty" maxlength="12" value="1" title="" class="input-text" />
<div class="qty_inc_dec">
<i class="increment" onclick="incrementQty(this)">+</i>
<i class="decrement" onclick="decrementQty(this)">-</i>
</div>
</div>
<button type="button" title="Add to Cart" class="btn-cart">Add to Cart</button>
</div>
</div>
</div>