當輸入具有指定值時隱藏div

Question

我試圖在值= 10時隱藏div

這是可以正常工作的代碼和演示 ：

<script>
$('input[name=test]').keyup(function(){
  if($(this).val()<10)
    $('#yeah').show();
  else
    $('#yeah').hide();
 });
</script>

<label>Type whatever</label>
<input type="text" name="test"value="10"  />

<div id="yeah" style="display:none;">
<input type="submit"   />
</div>

但是我試圖將該代碼轉換為Prototype代碼，並嘗試了以下代碼 ：

Event.observe(window, 'load', function () { 
$('input[name=test]').keyup(function(){
if($(this).val()<10)
$('#yeah').show();
else
$('#yeah').hide();
});
});

我只想在輸入值= 10時將div隱藏到原型代碼中。

請有人可以幫我嗎？

Answer 1

給文本框一個ID 。 例如：

<input type="text" id="txtbox" name="test" value="10" />

更改：

<div id="yeah" style="display:inline;">

至：

<div id="yeah" style="display:none;">

您需要使用返回數組的$$函數。

Event.observe('txtbox', 'keyup', function () {
     if ($$('input[name="test"]')[0].value < 10){
         $$('#yeah')[0].show();
     }
     else{
         $$('#yeah')[0].hide();
     }
});

注意：您也可以使用.first()代替[0]

JSFiddle

Answer 2

您對原型庫有問題，

Event.observe函數永遠不會觸發，其次，您似乎仍在使用jQuery API

$().keyup()

並且只加載原型函數。

如今，人們很少使用原型，人們將jQuery用於dom，將下划線/ lodash用於迭代。