如何更改 div 中的嵌套图像？

Question

我有一个由数据库提供的问题和答案列表。（下面相当于数据的呈现方式。）

HTML

<div class="question"><img class="allImg" src="faq-right.png"/> this is a question</div>
<div class="answer">and this is an answer</div>


<div class="question"><img class="allImg" src="faq-right.png"/> why is water wet?</div>
<div class="answer">because of bonding molecules</div>


<div class="question"><img class="allImg" src="faq-right.png"/> why is the sky blue?</div>
<div class="answer">the guy with the afro painted it that way</div>


<div class="question"><img class="allImg" src="faq-right.png"/> chickens and roads, who cares? </div>
<div class="answer">only the eggs</div>

JQUERY

<script>
$(document).ready(function(){
    $(".answer").hide();
    $(".question").click(function(){
        $(".answer").slideUp();
        $(".allImg").attr('src','faq-right.png');
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
            $(".allImg").attr('src','faq-down.png');
        }
    })
});
</script>

我可以把个别问题发给 show/hide。使用当前代码，指示哪个问题处于活动状态的箭头会在所有问题上发生变化。我只需要它改变被点击的那个。

（我尝试使用 "this" 和 img attr 的变体，但到目前为止所有尝试都失败了。）

还有一些代码重组的空间，但目前每个问题都没有生成id。

Answer 1

将选择器更改为 $(this).find(".allImg").attr('src','faq-down.png');

$(document).ready(function(){
    $(".answer").hide();
    $(".question").click(function(){
        $(".answer").slideUp();
        $(".allImg").attr('src','faq-right.png');
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
            $(this).find(".allImg").attr('src','faq-down.png');
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question"><img class="allImg" src="faq-right.png"/> this is a question</div>
<div class="answer">and this is an answer</div>


<div class="question"><img class="allImg" src="faq-right.png"/> why is water wet?</div>
<div class="answer">because of bonding molecules</div>


<div class="question"><img class="allImg" src="faq-right.png"/> why is the sky blue?</div>
<div class="answer">the guy with the afro painted it that way</div>


<div class="question"><img class="allImg" src="faq-right.png"/> chickens and roads, who cares? </div>
<div class="answer">only the eggs</div>

如何更改 div 中的嵌套图像？

How to change a nested image in a div?

jquery

html

list

this

indicator