Question

我一直在尝试构建一个有产品的简单产品页面。我想做的只是当我点击＆＃34;添加到购物篮＆＃34;某个产品的按钮，它只会增加此产品编号的总和。我的代码问题是，只需单击任何添加到购物篮按钮，无论如何都会增加所有产品。我的代码出了什么问题？

＆＃13;

	$( document ).ready(function() {

			var Product = function(name,price,counter) {
			this.name = name;
			this.price = price;
			this.counter = counter;
			// this.button = button;
			}

			Product.prototype.addToBasket = function(){
				return this.counter.innerHTML++;
			}


			//Products, addtobasket buttons and removefrombasket buttons
			var allProducts = document.querySelectorAll('.product');
			var productRed = document.querySelector('.productred');
			var productBlue = document.querySelector('.productblue')
			var addBtn = document.querySelectorAll('.addtobasket');
			var rmvBtn = document.querySelectorAll('.removefrombasket')
			
			//Red Product
			var redProductPrice = $('#red .price-tag');
			var redProductCounter = document.getElementById('red-counter');
			var redProductElement = document.getElementById('red');
			var redProduct = new Product(redProductElement,redProductPrice.html(),redProductCounter);

			//Blue Product
			var blueProductPrice = $('#blue .price-tag');
			var blueProductCounter = document.getElementById('blue-counter');
			var blueProductElement = document.getElementById('blue');
			var blueProduct = new Product(blueProductElement,blueProductPrice.html(),blueProductCounter);

			var clickBtn = function(obj) {
				for (var i = 0; i < allProducts.length ; i++) {
					var currentBtn = addBtn[i];
					if(currentBtn.parentElement.className === 'product productred') {
						currentBtn.addEventListener('click', function(e){
						e.preventDefault();
						obj.addToBasket();
					}, false)
					}

					else if(currentBtn.parentElement.className === 'product productblue') {
						currentBtn.addEventListener('click', function(e){
						e.preventDefault();
						obj.addToBasket();
					}, false)
					}
				}
			}

			clickBtn(redProduct);
			clickBtn(blueProduct);

	});

＆＃13;

		body {
			width: 1060px;
			margin: 10px auto;
			font-family: "Arial",sans-serif;
		}

		.column {
			margin-top: 50px;
			width: 100%;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			justify-content: center;
		}

		.productred,
		.productblue {
			/*position: absolute;*/
			/*top: 50px;*/
			display: block;
			margin: 10px;
			border: 0.5px solid;
			width: 30%;
			min-height: 300px;
			text-align: center;
		}

		.productred .addtobasket,
		.productred .removefrombasket,
		.productblue .addtobasket,
		.productblue .removefrombasket {
			position: relative;
			top: 105%;
		}

		.checkoutdiv {
			margin-top: 50px;
		}

		.productred .price-text,
		.productblue .price-text {
			position: fixed;
			top: 30%;
			color: white;
		}

		.productred .counter,
		.productblue .counter {
			position: absolute;
			top: 28%;
			margin-left: 290px;
			/*left: 38%;*/
			color: yellow;
			border: 1px solid;
			padding: 5px;
		}

		#red {
			background-color: red;
		}

		#blue {
			background-color: blue;
		}

		#green {
			background-color: green;
		}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<script
  		src="https://code.jquery.com/jquery-3.2.1.min.js"
 	 	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  		crossorigin="anonymous">
    </script>
	<meta charset="UTF-8">
	<title>Order Page</title>
</head>
<body>
	<main id="container">

		<div class="column">
			<div class="product productred" id="red">
				<p class="price-text"> Price: <span class='price-tag'>10</span></p>
				<p id='red-counter' class="counter">0</p>
				<button class="addtobasket red">Add to Basket</button>
			</div>

			<div class="product productblue" id="blue">
				<p class="price-text"> Price: <span class='price-tag'>15</span> </p>
				<p id='blue-counter' class="counter">0</p>
				<button class="addtobasket blue">Add to Basket</button>
			</div>


	</main>

</body>
</html>

＆＃13;

根据条件，将事件监听器添加到不同的按钮

0 个答案: