如何通过javascript单击列表中的一个元素来获取数据集

Question

我有一组列表，列表的每个块都有一个数据id集。我希望在点击块的时候得到被点击块的data-id。然而，我还不熟悉javascript，所以我不知道如何正确地得到它。我希望你能帮助我，谢谢你。

let wrap = document.querySelector('.wrap');
let item = wrap.querySelectorAll('.notice_item');
for (let i = 0; i < item.length; i++) {
item[i].onclick = function(e) {
console.log(e.target.dataset.id)
}
}

.wrap {
display: flex;
flex-direction: column;
}
.wrap li {
padding: 16px;
}
.wrap li:hover {
background-color: yellow;
}
.wrap li .info_title {
font-size: 20px;
color: #222;
}
.wrap li .info_main {
font-size: 14px;
color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
<a class="notice_item" href="javascript:;" data-id="111">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="javascript:;" data-id="222">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="javascript:;" data-id="333">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
</ul>

Answer 1

这种情况更适合使用事件委托。

顺便说一下，不要对href使用内联javascript:(或内联处理)。

document.addEventListener(`click`, handle);
function handle(evt) {
const checkNotice = evt.target.closest(`.notice_item`);
if (checkNotice) {
console.clear();
console.log(checkNotice.dataset.id);
}
}

.wrap {
display: flex;
flex-direction: column;
}
.wrap li {
padding: 16px;
}
.wrap li:hover {
background-color: yellow;
}
.wrap li .info_title {
font-size: 20px;
color: #222;
}
.wrap li .info_main {
font-size: 14px;
color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
<a class="notice_item" href="#" data-id="111">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="#" data-id="222">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="#" data-id="333">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
</ul>

Answer 2

我已经修改了一点你的html删除标签。我给每个div添加了监听器类。note_content在点击

时获取它的data-id

let wrap = document.querySelectorAll('.notice_content');
wrap.forEach(item => {
item.addEventListener("click", function(){
console.log(item.dataset.id)
})
})

.wrap {
display: flex;
flex-direction: column;
}
.wrap li {
padding: 16px;
}
.wrap li:hover {
background-color: yellow;
}
.wrap li .info_title {
font-size: 20px;
color: #222;
}
.wrap li .info_main {
font-size: 14px;
color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
<div class="notice_content" data-id="111">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</li>
<li>
<div class="notice_content"  data-id="222">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</li>
<li>
<div class="notice_content" data-id="333">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</li>
</ul>

Answer 3

你很接近了。检查下面的代码。希望对你有帮助。

let wrap = document.querySelector('.wrap');
let item = wrap.querySelectorAll('.notice_item');
for (let i = 0; i < item.length; i++) {
item[i].onclick = function(e) {
console.log(e.currentTarget.dataset.id);
}
}

.wrap {
display: flex;
flex-direction: column;
}
.wrap li {
padding: 16px;
}
.wrap li:hover {
background-color: yellow;
}
.wrap li .info_title {
font-size: 20px;
color: #222;
}
.wrap li .info_main {
font-size: 14px;
color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
<a class="notice_item" href="javascript:;" data-id="111">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="javascript:;" data-id="222">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="javascript:;" data-id="333">
<div class="notice_content">
<h3 class="info_title">TITLE</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</a>
</li>
</ul>

Answer 4

这是jQuery的解决方案:

• 访问数据集。id with.data('id')
• 访问.find()的子元素，如.find('.info_title').text()

请注意，您通常不需要在每个列表元素中使用ID，因为您可以从DOM访问所需的内容。你可以用.find('.someClass')找到一个子元素，用.parent()向上遍历一个元素，用.closest('.someClass')向上找到一个元素。

$(function() {
$('.notice_content').click(function() {
let id = $(this).data('id');
let title = $(this).find('.info_title').text();
console.log('click on:', { id, title });
});
});

.wrap {
display: flex;
flex-direction: column;
}
.wrap li {
padding: 16px;
}
.wrap li:hover {
background-color: yellow;
}
.wrap li .info_title {
font-size: 20px;
color: #222;
}
.wrap li .info_main {
font-size: 14px;
color: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
<div class="notice_content" data-id="111">
<h3 class="info_title">TITLE 111</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</li>
<li>
<div class="notice_content"  data-id="222">
<h3 class="info_title">TITLE 222</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</li>
<li>
<div class="notice_content" data-id="333">
<h3 class="info_title">TITLE 333</h3>
<p class="info_main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In labore assumenda perspiciatis illum quo corrupti, magnam ratione fuga omnis enim!</p>
</div>
</li>
</ul>