我已经尝试学习Java一段时间了,遇到了我意识到适用于我的'Tutorial炼狱'这个词。所以我以为我会用我到目前为止所学到的东西做些事情。
我特别想使用对象,函数构造函数和原型创建某些东西。我想要的是一种购物车功能,您将在下面的Codepen链接中看到该功能。我不是想为每个商品/产品手动添加对象,而是想让我的代码动态地找到所有商品/产品,并将它们转换为可以在Javascript中访问和操作的对象。我很欣赏实现自己的目标可能会更好,但这是我想去尝试的一个项目。
我花了很多时间尝试各种不同的事情,并考虑采取一种我认为可以管理的更简单方法(使用数据属性),但是花了这么长时间我只是想知道我是否m做是可能的。
在这个阶段,我希望能够单击“添加到报价”按钮并console.log对象/产品的属性和值。笔中JS的第16行是我在console.log(this.productTitle);
中挣扎的地方>
https://codepen.io/rosstr2/pen/MWaJgZx
(function() { // Declare global variables const product = new Product(); const productArr = []; // Create Product function constructor function Product(productTitle, productPrice, cartBtn) { this.productTitle = productTitle; this.productPrice = productPrice; this.cartBtn = cartBtn; } // Event listener for logging the product when clicked Product.prototype.listProduct = function() { this.cartBtn.addEventListener('click', function(event) { event.preventDefault(); console.log(this.productTitle); }) } // Seach for all products on the page and convert to objects const products = document.querySelectorAll('.product-box'); for (let i = 0; i < products.length; i++) { const singleProduct = products[i]; const title = singleProduct.querySelector('.product-title').textContent; const price = singleProduct.querySelector('.product-price').textContent; const btn = singleProduct.querySelector('.add-quote'); const product = new Product(title, price, btn); // add product objects to array productArr.push(product); product.listProduct(); } })();
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } :root { --turqoise: #00a492; --green: #8fb91e; --blue: #00a9e2; --black: #333333; } body { font-family: 'Roboto', sans-serif; } .container { width: 90%; max-width: 1400px; margin: 0 auto; padding-top: 3em; } .site-header {} .product-box-wrap { display: flex; justify-content: center; flex-wrap: wrap; } .product-box { min-width: 300px; width: 22%; margin: 1em; border: solid 4px var(--turqoise); padding: 2em 1.5em; border-radius: 3px; box-shadow: 3px 3px 3px #ccc; display: flex; flex-direction: column; position: relative; } .product-box.active { background: #e2e2e2; border: solid 4px red; box-shadow: none; } .product-box h1 { font-size: 1.75em; font-weight: 700; color: var(--turqoise); margin-bottom: 0.4em; } .product-box p { font-size: 1.1em; font-weight: 300; line-height: 1.5em; color: var(--black); margin-bottom: 1em; } .product-price { position: absolute; padding: 10px; left: 0; bottom: 0; font-weight: 700; font-size: 1.2em; color: #fff; display: block; margin-top: 0.5em; background: var(--blue); } .add-quote { position: absolute; padding: 10px; right: 0; bottom: 0; font-weight: 700; text-transform: uppercase; text-decoration: none; font-size: 1.2em; color: #fff; display: block; margin-top: 0.5em; background: var(--green); transition: background .2s ease-in-out; } .add-quote:hover { background: var(--turqoise); } .quote-output { margin: 3em 0; } .quote-output h2 { font-size: 2.7em; color: var(--turqoise); margin-bottom: 0.5em; } .quote-row { display: flex; padding: 1.5em 0; font-size: 1.7em; border-bottom: dotted 1px #000; } .remove-item { margin-right: 1em; text-decoration: none; font-weight: 700; color: red; } .cart-product { margin: 0 3em; } .cart-total { margin-top: 2em; font-size: 1.7em; } .cart-total p span { font-weight: 700; padding-right: 3em; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Product Totter Upperer</title> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="product-box-wrap"> <div class="product-box active" id="business-cards" data-product="business-cards"> <h1 class="product-title">Business Cards</h1> <p>Business Cards are the most fundamental way to exchange business or personal contact information, therefore the importance of a professionally designed and printed Business Card is greater than ever to secure a long lasting impression of you and your company.</p> <span class="product-price" data-price="£100">£100.00</span> <a href="#" class="add-quote" id="b-card-btn">Add to Cart</a> </div> <!-- product-box --> <div class="product-box lealfet" id="leaflets" data-product="leaflets"> <h1 class="product-title">Leaflets</h1> <p>Printed leaflets are a really effective tool to reach out to potential customers. Whether you're a new business start up or established business, leaflets have a number of purposes when promoting your products/services. </p> <span class="product-price" data-price="£50">£50.00</span> <a href="#" class="add-quote" id="leaflet-btn">Add to Cart</a> </div> <!-- product-box --> <div class="product-box letterheads" id="letterheads" data-product="letterheads"> <h1 class="product-title">Letterheads</h1> <p>Business Stationery is a key tool for your business, as it will leave a lasting impression of you and your company. A professionally designed stationery set is what will set you apart from the competition giving you the edge to thrive within your trade.</p> <span class="product-price" data-price="£120">£120.00</span> <a href="#" class="add-quote" id="letterhead-btn">Add to Cart</a> </div> <!-- product-box --> <div class="product-box website" id="website" data-product="website"> <h1 class="product-title">Website</h1> <p>We work with businesses of all sizes to create high impact, mobile friendly websites that get results. Whether you're a new business start-up or long established, we can help to build your online presence.</p> <span class="product-price" data-price="£500">£500.00</span> <a href="#" class="add-quote" id="website-btn">Add to Cart</a> </div> <!-- product-box --> </div> <!-- product-box-wrap --> <div class="quote-output"> <h2>Cart</h2> <div class="quote-row"> <a href="" class="remove-item">X</a> <p class="cart-product">Business Cards</p><span class="cart-price">£100.00</span> </div> <div class="quote-row"> <a href="" class="remove-item">X</a> <p class="cart-product">Business Cards</p><span class="cart-price">£100.00</span> </div> <div class="quote-row"> <a href="" class="remove-item">X</a> <p class="cart-product">Business Cards</p><span class="cart-price">£100.00</span> </div> <div class="quote-row"> <a href="" class="remove-item">X</a> <p class="cart-product">Business Cards</p><span class="cart-price">£100.00</span> </div> <div class="quote-row"> <a href="" class="remove-item">X</a> <p class="cart-product">Business Cards</p><span class="cart-price">£100.00</span> </div> <div class="quote-row"> <a href="" class="remove-item">X</a> <p class="cart-product">Business Cards</p><span class="cart-price">£100.00</span> </div> <div class="cart-total"> <p class="cart-total-output"><span>Total:</span> £200.00</p> </div> <!-- cart-total --> </div> </div> <!-- container --> <script src="script.js"></script> </body> </html>
我已经尝试学习Java一段时间了,遇到了我意识到适用于我的'Tutorial炼狱'这个词。所以我以为我会用我所学到的东西做东西...
这不平凡。