我有一个名为“banner_category”的类,其多个 id 如下
<div class="row">
<div class="col-md-3">
<div class="banner_item align-items-center" id="cat1" style="background-image:url(images/bolts.jpg)">
<div class="banner_category">
<a href="#">Bolts</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="banner_item align-items-center" id="cat2" style="background-image:url(images/abrasives.jpg)">
<div class="banner_category">
<a href="#">Abrasives</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="banner_item align-items-center" id="cat3" style="background-image:url(images/valves.jpg)">
<div class="banner_category">
<a href="#">Valves</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="banner_item align-items-center" id="cat4" style="background-image:url(images/electrical.jpg)">
<div class="banner_category">
<a href="#>other</a>
</div>
</div>
</div>
</div>
我想要做的是,当我单击每个横幅时,我想要获取横幅文本。例如,当我单击 id=cat4 时,它应该 console.log“other”,id=cat1 应该 console.log“bolts” 我知道如何通过 ids 设置事件监听器,我想做的是设置一个函数而不是四个函数,所以我尝试了这个
$(".banner_category").on("click", function(){
var clickedcat = document.getElementById('cat').textContent;
console.log(clickedcat);
})
但无论我单击哪一个,它都只会 console.log bolt 。
如何实现使用一个函数获取每个 Id 的相应文本?
最佳答案
您没有以 cat
作为 id 的元素。 id 没有神奇的自动完成功能 - 您必须命名要定位的 id。
话虽这么说,首先 - 不要混合 jQuery 和纯 js - 其次为什么不直接输出 $(this).text()
:
$(".banner_category").on("click", function(){
console.log($(this).text());
// optional - trim the text: $(this).text().trim()
});
$('.banner_category').on('click', function() {
console.log($(this).text().trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<div class="banner_item align-items-center" id="cat1" style="background-image:url(images/bolts.jpg)">
<div class="banner_category">
<a href="#">Bolts</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="banner_item align-items-center" id="cat2" style="background-image:url(images/abrasives.jpg)">
<div class="banner_category">
<a href="#">Abrasives</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="banner_item align-items-center" id="cat3" style="background-image:url(images/valves.jpg)">
<div class="banner_category">
<a href="#">Valves</a>
</div>
</div>
</div>
</div>
关于javascript - Html 类事件监听器无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47984891/