Javascript-我可以向对象添加click事件并访问每个对象实例的属性/值

问题描述 投票:0回答:1

我已经尝试学习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">&pound;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">&pound;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">&pound;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">&pound;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">&pound;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">&pound;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">&pound;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">&pound;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">&pound;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">&pound;100.00</span>
      </div>
      <div class="cart-total">
        <p class="cart-total-output"><span>Total:</span> &pound;200.00</p>
      </div>
      <!-- cart-total -->
    </div>
  </div>
  <!-- container -->

  <script src="script.js"></script>
</body>

</html>

我已经尝试学习Java一段时间了,遇到了我意识到适用于我的'Tutorial炼狱'这个词。所以我以为我会用我所学到的东西做东西...

javascript
1个回答
0
投票

这不平凡。

© www.soinside.com 2019 - 2024. All rights reserved.