javascript - 如何在列表使用 slideup 和 slidedown 时使用 onclick 更改图像

Question

我想在点击列出的 child 的 parent 时更改 img 的 src。我正在使用我在 StackOverflow 上找到的一些我一直在使用的代码，因为我在 slideup 和 slidedown 方面遇到了问题。

在每个最上面的项目(父项)旁边，左侧将是一个指向右侧的箭头图标。单击该图标后，该图像应变为向下箭头。

我可以让图片在点击时改变，但除非你点击图片，否则图片不会变回来。因此，我相信我需要将更改与 slideup 和 slide down 功能 Hook 。如果您单击关闭链接或单击新的父级，图像也应该变回。

我可以在没有“一次只能显示一个列表”功能的情况下生活，这将消除在单击新父级时图像也发生变化的需要。

对于这个 fiddle ，我只将我试图做的应用到列表的第一个父级:http://jsfiddle.net/9aa5n/51/

HTML:

    <li><a href="javascript:void(0);" class="edit_button edit_this" id="1"><img src="arrowright.png"></a></li>  
<li class="show_hide" id="1C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="1Close" class="close cancel_btn">Close</a>
</li>

<li><a href="javascript:void(0);" class="edit_button edit_this" id="2">Edit</a></li>
<li class="show_hide" id="2C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="2Close" class="close cancel_btn">Close</a>
</li>

<li><a href="javascript:void(0);" class="edit_button edit_this" id="3">Edit</a></li>
<li class="show_hide" id="3C">
<p>lkjlkjasdfasdf</p>
<a href="javascript:void(0);"  id="3Close" class="close cancel_btn">Close</a>
</li>

jQuery/Javascript:

    $(document).ready(function() {
        $('.show_hide').slideUp(0);
        $('.edit_this').click(function() {
            $('.show_hide').slideUp(300);
            var takeID = $(this).attr('id');
            $('#' + takeID + 'C').slideDown(300);


        });
        $('.close').click(function() {
            var takeID = $(this).attr('id').replace('Close', '');
            $('#' + takeID + 'C').slideUp(300);
        });
    });

$('#img-tag').on({
    'click': function() {
                     var src = ($(this).attr('src') === 'arrowright.png')
            ? 'arrowdown.png'
            : 'arrowright.png';
         $(this).attr('src', src);
    }
});

Answer 1

我更新了你的 jsfiddle:http://jsfiddle.net/9aa5n/53/

由于您没有提供图片的绝对路径，我从网上添加了一些。

我删除了您的点击事件，并将其替换为这个，我相信您的问题是您在 jQuery 中引用元素的方式。

$(".edit_button").click(function() {
    var img = $(this).find("img").first();
    console.log(img.attr("src"));
    if (img.attr("src") === 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png') {
            img.attr("src", 'http://png-3.findicons.com/files/icons/2315/default_icon/256/arrow_down.png');
            console.log(img.attr("src"));
    } else {
        img.attr("src", 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png');
         console.log(img.attr("src"));
    }
});

这应该可以让您开始完善 UI， 即关闭所有 .edit_button 然后只打开 $(this).find("img").first() 元素 ...