如何使用jQuery获取点击的元素文本？

Question

我想在jQuery的一个警报中获得点击元素的文本。参见下面的示例https://jsfidle.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

不要使用那么多的click事件，只需简单一些:jQuery（“.asp_res_url”）.click（函数（）{}）；

这是可行的：

null

js prettyprint-override">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>

Answer 2

由于所有链接都嵌入在h3元素中，您可以在jQuery中更加具体地检索类名为的另一个元素中的所有h3元素。results如下所示：

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

其次，在您的代码中，您使用了两个click函数...这是不必要的。上面的代码行..单击类名为.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。