프로토 타입 js를 사용하여 자식 이미지 소스 변경

Question

프로토 타입을 사용하여 상위 링크를 클릭하면서 아이콘 경로를 변경하는 방법은 무엇입니까?

<a onclick="toggleAmenity('park'); return false;" href="#"> 
    <input type="image" id="parks_button" src="/images/amenities/icon_parks.gif" name="commit"> 
</a> 

Answer 1

이 고양이를 스킨하는 데 약 백만 가지 방법이 있지만 프로토 타입 재료를 사용하여 아이디어를 얻을 수 있습니다.

'어 메 니티'대신 이미지 크기를 사용하고 있습니다. 다소 혼란 스럽지만 클릭 할 때 시각적 인 변화를 보여주고 싶었습니다. 나는이 유형의 (또는 대부분의 다른 유형의) 유형에 대해 onclick 속성을 사용하는 것에 대해 강력히 권고합니다.

<p> 
    <a data-toggle-amenity='64' href="#"> 
    <input type="image" id="parks_button" src="http://www.google.com/images/icons/product/chrome-128.png" name="commit"> 
    </a> 
</p> 

<p> 
    <a href="#">This anchor won't fire</a> 
</p>​ 

http://jsfiddle.net/gSfmL/

.

document.on('click', 'a[data-toggle-amenity]', function(event, element) { 
    var amenityToggleType = element.readAttribute('data-toggle-amenity'); 
    element.down('input').writeAttribute({src: 'http://www.google.com/images/icons/product/chrome-' + amenityToggleType + '.png'}); 
    element.writeAttribute('data-toggle-amenity', null); // removes the attribute 
});​