Javascript jQuery幻灯片切换更改图像单击？

当我点击

.main\u框

div时，两个向上箭头的图像都会改变。我只想在单击第一个

.main\u框时更改第一个向上箭头图像

有人知道怎么做吗

<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>




$（文档）.ready（函数（）{
$（“.arrow up”）.hide（）；
$（“.main_框”）。单击（函数（）{
$（此）.slideToggle（“.slide_box”）.slideToggle（500）；
$（“.arrow up，.arrow down”）.toggle（）；
});
});
改为此，只应将子元素切换到单击的元素

<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>


$（文档）.ready（函数（）{
$（“.arrow up”）.hide（）；
$（“.main_框”）。单击（函数（）{
$（此）.slideToggle（“.slide_box”）.slideToggle（500）；
$（this.find（“.arrow up，.arrow down”）.toggle（）；
});
});
检查此项

JS

 $(document).ready(function() {
    $('#toggle3').click(function() {
    $('.toggle3').slideToggle('1100');
       var src = $("#bg3").attr('src') == "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg"   ? "http://s12.postimg.org/jy2yiw6ix/box_arrow_up_green.jpg" :  "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg";
            $("#bg3").attr('src', src);
        });
        });

从JSFIDLE获得的其他代码部分（this）。查找（“.arrow…”
$）