如何在具有相同班级但多个div的Div内选择文本

Question

I need your help please. In getting something work, I've tried pulling up information from feeds and blog, yet it's not trusted. Here is my code...

<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>

How To select and Get the text within the clicked on h4. I Just don't know how to start, Please I need y'all help. Thanks.

Answer 1

Using 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> 

A simple solution using 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> 

Answer 2

Using jQuery you can do like this

 $('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> 

Using native 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> 

Answer 3

This is My code ..... I give them id's and sending the id of the clicked element with the function the return the text that you click on it ...

          <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>

ok using javascript .....

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

Answer 4

试试这个代码

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