목록이 슬라이드 업 및 슬라이드를 사용하는 동안 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를/자바 스크립트 :

$(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() 요소 ... 제가이되고 싶어 UI를 얻을 도움이