javascript - プロトタイプ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

この猫の皮を剥ぐ方法は約100万通りありますが、これにより、プロトタイプのものを使用したアイデアが得られる可能性があります。

「アメニティ」の代わりに、画像サイズを使用しています。ちょっと紛らわしいですが、クリックすると視覚的な変化を見せたかったのです。このタイプのもの（または他のほとんどのタイプのもの）にonclick属性を使用しないことを強くお勧めします。

http://jsfiddle.net/gSfmL/

<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>​

。

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
});​