如何使用jQuery獲得點擊的元素文本？

Question

我想在jQuery警報中獲取clicked元素的文本。 參見下面的示例https://jsfiddle.net/pymd4n04/2/

jQuery(".results").click(function() {
event.preventDefault();
    jQuery(this).find('h3').click(function() {
      var text = jQuery(this).text();
console.log(text.trim());
alert(text.trim());
    });
});

但是，當我第一次單擊時，將顯示為空警報，而當我單擊第二次時，將顯示該值，但會發出兩次警報。 並保持增量警報。

任何幫助，將不勝感激。

提前致謝

Answer 1

由於您所有的鏈接都嵌入在h3元素內，因此您可以在jQuery中更具體地檢索位於類名稱為。的另一個元素內的所有h3元素， .results如下：

jQuery(".results h3").click(function() {

其次，在您的代碼中，您使用了兩個單擊功能……這不是必需的。 上面的代碼行..一旦您單擊類名稱為.results元素內的h3元素，您就可以輕松地獲取該h3元素的文本，如下所示：

jQuery(".results h3").click(function(event) {
    event.preventDefault();
    var text = jQuery(this).text(); // 'this' refers to the h3 element that you clicked.. not the div with the class .results
    alert(text.trim());
});

這是工作的JSFiddle 。

Answer 2

不要使用那么多的單擊事件，只是更簡單： jQuery(".asp_res_url").click(function() {});

這有效：

 jQuery(".asp_res_url").click(function() { event.preventDefault(); alert( jQuery(this).text().trim()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="results" style="height: 460px; overflow-y: auto;"> <div class="resdrg"><div class="item asp_result_pagepost asp_an_fadeIn"> <div class="asp_content"> <a class="asp_res_image_url" href="https://einsteam.com/contact/"> <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);"> <div class="void"></div> </div> </a> <h3><a class="asp_res_url" href="https://einsteam.com/contact/"> Real Estate <span class="overlap"></span> </a></h3> <div class="etc"> </div> </div> <div class="clear"></div> </div> <div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn"> <div class="asp_content"> <a class="asp_res_image_url" href="https://einsteam.com/contact/"> <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);"> <div class="void"></div> </div> </a> <h3><a class="asp_res_url" href="https://einsteam.com/contact/"> E-Commerce <span class="overlap"></span> </a></h3> <div class="etc"> </div> </div> <div class="clear"></div> </div> <div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn"> <div class="asp_content"> <a class="asp_res_image_url" href="https://einsteam.com/contact/"> <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);"> <div class="void"></div> </div> </a> <h3><a class="asp_res_url" href="https://einsteam.com/contact/"> Retail <span class="overlap"></span> </a></h3> <div class="etc"> </div> </div> <div class="clear"></div> </div> <div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn"> <div class="asp_content"> <a class="asp_res_image_url" href="https://einsteam.com/contact/"> <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);"> <div class="void"></div> </div> </a> <h3><a class="asp_res_url" href="https://einsteam.com/contact/"> Payment Industry <span class="overlap"></span> </a></h3> <div class="etc"> </div> </div> <div class="clear"></div> </div> <div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn"> <div class="asp_content"> <a class="asp_res_image_url" href="https://einsteam.com/contact/"> <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);"> <div class="void"></div> </div> </a> <h3><a class="asp_res_url" href="https://einsteam.com/contact/"> Field Service <span class="overlap"></span> </a></h3> <div class="etc"> </div> </div> <div class="clear"></div> </div> <div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn"> <div class="asp_content"> <a class="asp_res_image_url" href="https://einsteam.com/contact/"> <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);"> <div class="void"></div> </div> </a> <h3><a class="asp_res_url" href="https://einsteam.com/contact/"> SAS <span class="overlap"></span> </a></h3> <div class="etc"> </div> </div> <div class="clear"></div> </div> <div class="asp_spacer"></div></div> </div>