jquery - Jquery选择同一类div的不同元素

Question

我有这 3 个 div：

单击查看按钮会更改内容：

所以，是的，我正在使用类进行选择，所以当我单击所有 3 个中的任何一个“查看图表”按钮时，所有 3 个 div 都会按预期更改......但我希望那个特定的 div 只更改。我可以通过给每个 div 它自己的 id 和东西来轻松地做到这一点，但这将是这样做的低效方式，所以我需要使用 $(this) 选择器来完成它，我只是不知道如何选择每个 div在其自己的。

这是 jQuery 的样子：

$(document).ready(function(){
    $('.beltrap').click(function(){
        $('.alert_content').toggleClass('alert_content2');
        $('.alert_content p').toggle('500');
        $('.alert_content img').toggle('500');
    });
});

好的，这里是 HTML 标记，其余 2 是相同的：

<div class="alert">
<div class="uptrap"><h2>LOTE Alerted</h2></div>
<div class="alert_content">
<p><strong>LOTE</strong> alerted at$1.00 then reached <strong>$22.00</strong> for gains of over 2000%.</p>
<img src="img/graph2.png">
</div>
<div class="beltrap"><div class="gg_button">View Chart</div></div>
</div>

Answer 1

这应该有效。从.beltrap它开始选择父容器并在父容器内搜索.alert_content

$(document).ready(function(){
    $('.beltrap').click(function() {
        $(this).parent().find('.alert_content').toggleClass('alert_content2');
        $(this).parent().find('.alert_content p').toggle('500');
        $(this).parent().find('.alert_content img').toggle('500');
    });
});

Answer 2

试试这个：

$('.beltrap').click(function(){
    $(this).toggleClass('alert_content2');
    $(this).find('p').toggle('500');
    $(this).find('img').toggle('500');
});

Answer 3

用这个。

标记

<div class="gg_button" onclick="gg_buttonclick(this)">View Chart</div>

脚本

    function gg_buttonclick(ref)
    {
      now ref hold the reference to the clicked div.
      do your stuff
    }