Question 35509 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to click on a block through javascript to grab the attribute value of this block? – Jquery

I want to click on each item to capture the value of the data-id attribute inside, but I did some research on the Internet! I still encounter many difficulties, and I still can’t figure out how to capture the data-id in each item The value, I hope someone can give me guidance~ I feel that I am in the process of learning the program, and I feel a lot of frustration

document.addEventListener("click", handle);

const demo = e.target.closest(".demo");
let item = document.querySelectorAll(".item");

for (let i = 0; i < item.length; i++) {
  item[i].onclick = function(e) {
    console.log(e.target.dataset.id)
  };
}
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  display: inline-block;
  border: 1px solid #222;
}

.item {
  border: 1px solid #222;
  padding: 30px;
}

.item:hover {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo">
  <li class="item" data-id="11111">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="22222">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="333">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
</ul>
Tags:

2

Answers


  1. 0

    Don’t mix native JavaScript and jQuery, better use one or the other. Here is a jQuery solution:

    $(function() {
  $('.demo li').click(function() {
    let id = $(this).data('id');
    console.log('click on ', id);
  });
});
    body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  display: inline-block;
  border: 1px solid #222;
}

.item {
  border: 1px solid #222;
  padding: 10px;
}

.item:hover {
  background-color: yellow;
}
.as-console-wrapper { max-height: 20px !important; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo">
  <li class="item" data-id="11111">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="22222">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="333">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    You have a span element wrapping everything in the li the span is the actual event target.

    Use the this keyword instead which references the element the event listener is attached to.

    /*document.addEventListener("click", handle);

const demo = e.target.closest(".demo");
*/
let item = document.querySelectorAll(".item");

for (let i = 0; i < item.length; i++) {
  item[i].onclick = function(e) {
    /*Oh look this is a span*/
    console.log(e.target)
    //Use the "this" keyword intead
    console.log(this.dataset.id)
  };
}
    body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  display: inline-block;
  border: 1px solid #222;
}

.item {
  border: 1px solid #222;
  padding: 30px;
}

.item:hover {
  background-color: yellow;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo">
  <li class="item" data-id="11111">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="22222">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="333">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search