HTML類事件偵聽器無法正常工作

Question

我有一個名為“ 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”我知道如何通過id設置事件監聽器，我想做的是設置一個函數而不是四個函數功能，所以我嘗試了這個

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

但無論單擊哪個，它僅console.log螺栓。

如何使用一個函數實現獲取每個ID的相應文本？

Answer 1

您沒有以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>