如何在列表使用滑动和滑动时使用onclick更改图像

Question

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

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

我可以通过图像改变onClick，但除非您单击图像，否则图像不会变回。因此，我相信我需要将变化与幻灯片和幻灯片下拉功能挂钩。如果您单击关闭链接或单击新的父项，图像也应该变回。

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

对于这个小提琴，我也只适用什么，我试图做的到列表的第一个父：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()元素...