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
    }