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>

Answer 2

选中此jsfiddle.net

<强> 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);
        });
        });

您从jsfiddle Link

获得的其他代码部分

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

2 个答案: