javascript - jQuery 幻灯片切换更改图像 onclick？

Question

当我单击 .main_box div 时，两个向上箭头图像都会发生变化。当我单击第一个 .main_box div 时，我只想更改第一个向上箭头图像。

有人知道怎么做吗？

<div class="wrapper">
    <div class="main_box">
        <div class="arrow-up"><img src="arrow-up.png"></div>
        <div class="arrow-down"><img src="arrow-down.png"></div>
    </div>
    <div class="sliding_box"></div>
</div>

<div class="wrapper">
    <div class="main_box">
        <div class="arrow-up"><img src="arrow-up.png"></div>
        <div class="arrow-down"><img src="arrow-down.png"></div>
    </div>
    <div class="sliding_box"></div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".arrow-up").hide();
        $(".main_box").click(function(){
            $(this).siblings(".sliding_box").slideToggle(500);
            $(".arrow-up, .arrow-down").toggle();
        });
    });
</script>

Answer 1

改为此，这应该只将子元素切换到单击的元素。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".arrow-up").hide();
        $(".main_box").click(function(){
            $(this).siblings(".sliding_box").slideToggle(500);
            $(this).find(".arrow-up, .arrow-down").toggle();
        });
    });
</script>