javascript - 使用 Prototype 或 Javascript 选择和隐藏元素

Question

有人愿意参加原型(prototype)挑战吗？我是 Prototype 的新手，我正在尝试执行以下操作。会在 jQuery 中执行此操作，但安装的唯一 js 库是 Prototype。也许有人有可行的 JavaScript 解决方案？

1. 从表单值(前后)中去除所有空格
2. 如果输入表单长度为 3 或更少，则隐藏所有行中的所有 checkPrice.gif 图像。

不确定使用 Prototype 是否可行。

<form method="get" id="searchForm" name="car" action="some-action">
<input type="text" value="Ford150" name="carPart" id="search" class="textContent">
</form>

<table border="1">
<tr>
<td class="description">Description:</td>
<td class="checkPrice"><p>Type:</p>
<p><a target="_blank" href="link.html"><img src="images/checkPrice.gif"></a></p>
</td>
</tr>

<tr>
<td class="description">Description:</td>
<td class="checkPrice"><p>Type:</p>
<p><a target="_blank" href="link.html"><img src="images/checkPrice.gif"></a></p>
</td>
</tr>
</table>

• 行重复

非常感谢任何可以提供帮助的人!

Answer 1

我假设您的意思是“如果输入表单值 length 为 3 或更小”，因为默认输入值不是数字。

function updateCheckPrice(event) {
    // $F() returns a string
    // String.strip() trims whitespace and returns a new string
    // String.length is a native property
    var length = $F(this).strip().length;

    // If length is 3 or less...
    var action = length <= 3 ? Element.hide : Element.show;

    // Pass the chosen show/hide function to every img element
    $$('img[src$=checkPrice.gif]').each(action);
}

document.observe('dom:loaded', function(){
    // Update as you type
    Event.observe('search', 'keyup', updateCheckPrice);
});