2

单击列出的子项的父项时，我想更改 img 的 src。我正在使用一些我在 StackOverflow 上找到的代码，因为我遇到了上滑和下滑的问题。

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

我可以在单击时更改图像，但除非您单击图像，否则图像不会变回。因此，我相信我需要将更改与上滑和下滑功能挂钩。如果您单击关闭链接或单击新的父级，图像也应该变回。

我可以没有“一次只能显示一个列表”功能，这将消除在单击新父级时也更改图像的需要。

对于这个小提琴，我只将我试图做的事情应用到列表的第一个父级：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);
    }
});
4

1 回答 1

0

我更新了你的 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()元素......

于 2013-07-18T16:48:11.453 回答