targeting using conditions or loops Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of targeting using conditions or loops without wasting too much if your time.

The question is published on by Tutorial Guruji team.

enter image description hereSo I have 6 product cards (2 rows 3 columns) displaying different products with image, name, price, review stars etc.. Each of these product cards have been given an id of product1, product2 etc. And on top of all these cards are 3 icons which show up on mouse hover. The icons are view icon, cart icon and Wishlist icon. Now my question is, on the click of the add to cart icon of a “particular” card I want to add “that” card’s product id to local storage. For eg : if I hover on and click the 4th card’s add to cart icon, that card’s product id which is product 4 should be saved in the local storage. How do I do this? Which loop or conditional to use and how? Pls help!

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="card mb-4" id="product1">
    <div class="icons d-flex justify-content-center" id="card_icons">
      <a href="#"><img class='img1' src="Images/heart-icon-trans.png" alt="inner heart icon"></a>
      <a href="#"><img src="Images/eye-icon-trans.png" alt="inner eye icon"></a>
      <a id="cart-icon1"><img src="Images/shopping-icon-trans.png" alt="inner shopping icon"></a>
    </div>
    <img class="card-img-top" src="Images/product1.png" alt="Card image cap">
    <span class='new_tag'>NEW</span>
    <div class="card-body d-flex flex-column align-items-center">
      <h5 class="card-title">Dummy Text Lorel</h5>
      <p class="card-text mb-0"><strong>Rs 1099.0</strong> <del>Rs 2748.0</del><span class="offer">(60%Off)</span></p>
      <div class="stars-group d-flex align-items-center mt-2" id="starsgroup">
        <img class="stars" src="Images/star.png" alt="star-rating" role="icon" aria-label='star rating'>
        <img class="stars" src="Images/star.png" alt="star-rating" role="icon" aria-label='star rating'>
        <img class="stars" src="Images/star.png" alt="star-rating" role="icon" aria-label='star rating'>
        <img class="stars" src="Images/star-empty.png" alt="star-rating" role="icon" aria-label='star rating'>
        <img class="stars" src="Images/star-empty.png" alt="star-rating" role="icon" aria-label='star rating'>
      </div>
    </div>
  </div>
</body>

</html>

Answer

So a really quick example of how you could do this with closest. Take note that on each of the links I added a class, to help identify which elements this logic should relate to. Since I assume different behavior should happen for each link, I made them distinct classes.

So now lets look at the logic. The logic creates a click event listener on the body. We do this since click events bubble up the DOM. This allows us to have one event handler that handles this logic for all the relevant elements on the page.

The logic checks to see if the element that was clicked, belongs to an element with one of our classes. So either the link or the image in the link was clicked. If it was, we can grab the id from the parent card and do what we want with it.

document.body.addEventListener('click', e => {
  if (e.target.closest('.inner-eye, .inner-heart, .shopping')) {
    console.log(e.target.closest('.card').id);
  }
});
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="card mb-4" id="product1">
    <div class="icons d-flex justify-content-center" id="card_icons">
      <a href="#" class="inner-heart"><img class='img1' src="Images/heart-icon-trans.png" alt="inner heart icon"></a>
      <a href="#" class="inner-eye"><img src="Images/eye-icon-trans.png" alt="inner eye icon"></a>
      <a id="cart-icon1" class="shopping"><img src="Images/shopping-icon-trans.png" alt="inner shopping icon"></a>
    </div>
    <img class="card-img-top" src="Images/product1.png" alt="Card image cap">
    <span class='new_tag'>NEW</span>
    <div class="card-body d-flex flex-column align-items-center">
      <h5 class="card-title">Dummy Text Lorel</h5>
      <p class="card-text mb-0"><strong>Rs 1099.0</strong> <del>Rs 2748.0</del><span class="offer">(60%Off)</span></p>
      <div class="stars-group d-flex align-items-center mt-2" id="starsgroup">
        <img class="stars" src="Images/star.png" alt="star-rating" role="icon" aria-label='star rating'>
        <img class="stars" src="Images/star.png" alt="star-rating" role="icon" aria-label='star rating'>
        <img class="stars" src="Images/star.png" alt="star-rating" role="icon" aria-label='star rating'>
        <img class="stars" src="Images/star-empty.png" alt="star-rating" role="icon" aria-label='star rating'>
        <img class="stars" src="Images/star-empty.png" alt="star-rating" role="icon" aria-label='star rating'>
      </div>
    </div>
  </div>
</body>

</html>
We are here to answer your question about targeting using conditions or loops - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji