如何选择具有相同类但多个Div中的文本

Question

我需要您的帮助。在让某些东西运行时，我尝试从提要和博客中获取信息，但是这些信息不可信。

以下是我的代码...

<div class="select_obj">
    <h4>Promote Channel</h4>
</div>
<div class="select_obj">
    <h4>Increase Conversion on Site</h4>
</div>
<div class="select_obj">
    <h4>Increase Conversion on App</h4>
</div>
...
<div class="select_obj">
    <h4>Get Video View</h4>
</div>

如何选择并获取所单击的h4标签中的文本。 我不知道从哪里开始，请大家帮帮我。谢谢。

- Precious Tom

---

请展示一下你目前尝试过的内容。 - Minderov

$('h4').click(function() {alert($(this).text())}); - Sky

Answer 1

使用 JavaScript

function getTxt(x){
    alert(x.innerHTML);  
}

<div class="select_obj">
    <h4 onclick="getTxt(this);">Promote Channel</h4>
</div>
<div class="select_obj">
    <h4 onclick="getTxt(this);">Increase Conversion on Site</h4>
</div>
<div class="select_obj">
    <h4 onclick="getTxt(this);">Increase Conversion on App</h4>
</div>
...
<div class="select_obj">
    <h4 onclick="getTxt(this);">Get Video View</h4>
</div>

使用jQuery的简单解决方案

$(".select_obj").click(function(){
    //to get the content  
    var txt=$(this).children("h4").text();
    alert(txt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_obj">
    <h4>Promote Channel</h4>
</div>
<div class="select_obj">
    <h4>Increase Conversion on Site</h4>
</div>
<div class="select_obj">
    <h4>Increase Conversion on App</h4>
</div>
...
<div class="select_obj">
    <h4>Get Video View</h4>
</div>

- Sachin Bahukhandi

Answer 2

使用jQuery可以这样实现

$('h4').on('click',function(event){
alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_obj">
  <h4>Promote Channel</h4>
</div>
<div class="select_obj">
  <h4>Increase Conversion on Site</h4>
</div>
<div class="select_obj">
  <h4>Increase Conversion on App</h4>
</div>
<div class="select_obj">
  <h4>Get Video View</h4>
</div>

使用原生JavaScript

var getAllH4 = document.querySelectorAll('h4');
getAllH4.forEach(function(item, index) {
  (function(item, i) { // creating closure
    item.addEventListener('click', function() {
      alert(item.textContent);
    });
  }(item, index))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_obj">
  <h4>Promote Channel</h4>
</div>
<div class="select_obj">
  <h4>Increase Conversion on Site</h4>
</div>
<div class="select_obj">
  <h4>Increase Conversion on App</h4>
</div>
<div class="select_obj">
  <h4>Get Video View</h4>
</div>

- brk

Answer 3

这是我的代码......我给它们分配了ID，并通过函数发送所点击元素的ID，以返回您单击的文本...

          <h4 id="a" onclick="getText(id)">Promote Channel</h4>
        </div>
        <div  class="select_obj">
          <h4 id="b" onclick="getText(id)">Increase Conversion on Site</h4>
        </div>
        <div  class="select_obj">
          <h4 id="c" onclick="getText(id)">Increase Conversion on App</h4>
        </div>
        ...
        <div  class="select_obj">
          <h4 id="d" onclick="getText(id)">Get Video View</h4>
        </div>

好的，使用JavaScript......

    <script>
            function getText(id)
            {
                var textReturned ="";
                textReturned = document.getElementById(id).innerHTML;
                alert(textReturned);
            }
        </script>

- Tareq Arar

---

我无法理解我的代码中哪些部分是无用的。 - Tareq Arar

Answer 4

尝试一下这段代码

$('h4').on('click',function(){alert($(this).text()) ;});

- khushmeet singh