Javascript Html类事件侦听器工作不正常

我有一个名为“banner\u 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的相应文本？

您没有将

cat

作为Id的元素。Id没有神奇的自动完成功能-您必须命名您想要定位的Id

也就是说，首先，不要混合使用jQuery和纯js，其次，为什么不直接输出

$（this）.text（）

：

$（'banner_category'）。在（'click'，function（）上{
console.log（$（this.text（）.trim（））；
});


$(".banner_category").on("click", function(){
    var clickedcat = document.getElementById('cat').textContent;
    console.log(clickedcat);
})

$(".banner_category").on("click", function(){
    console.log($(this).text());
    // optional - trim the text: $(this).text().trim()
});