Html 类事件侦听器无法正常工作答案

【问题标题】：Html class event listener is not working properlyHtml 类事件侦听器无法正常工作
【发布时间】：2017-12-27 09:45:49
【问题描述】：

我有一个名为“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);
})

但无论我点击哪一个，它都只会控制台记录螺栓。

如何实现使用一个函数获取每个 Id 的相应文本？

【问题讨论】：

标签： javascript jquery html class

【解决方案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>

【讨论】：