使用原型js更改子图像源

时间:2012-07-09 09:04:47

标签: javascript html prototypejs

如何在使用原型单击父链接时更改图标路径?

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

1 个答案:

答案 0 :(得分:0)

大约有一百万种方法来修饰这只猫,但这可能会给你一些使用Prototype的东西。

而不是'舒适'我正在使用图像大小。有点令人困惑,但我想在点击上显示视觉上的变化。我强烈建议不要为这类事物使用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
});​