原型$奇怪的行为

时间:2010-01-02 09:29:30

标签: javascript prototypejs

当我尝试使用原型的$函数通过id获取元素时,我得到了一个null对象,并得到了这种奇怪的行为:

document.observe('dom:loaded', function() {
  $$('.answer').each(function(answer) {
    console.log('answer.id: ' + answer.id);
    console.log('$(answer.id): ' + $(answer.id)); # works, so the element does exists
    console.log("$('answer_73'): " + $('answer_73')); # this doesn't, why?..
    console.log(' ');
  }); 
});

div是这样的:

<div id="answer_73" class="answer"> ...

并且没有标记错误

日志:

....
answer.id:answer-73
$(answer.id):[object HTMLDivElement]
$('answer_73'):null
....

更新

对不起,最后我发现没有出错......这只是一种类型:

<div class="answer" id="answer_<%= answer.id %> " 

这是导致这种“奇怪”行为的尾随空格。也许原型lib在返回对象的id时会删除trailig id,因此在第一种情况下不会发生错误。

3 个答案:

答案 0 :(得分:5)

我敢打赌你喝啤酒,你的文件中有两个ID为answer_73的元素。

答案 1 :(得分:2)

它适用于我(Firefox 3.5,最新prototype.js):

<html><head><title></title>
<script src="prototype.js"></script>
<script>
function _debug (msg) {
    document.body.innerHTML += "<p>"+msg+"</p>";
}
document.observe('dom:loaded', function() {
  $$('.answer').each(function(answer) {
    _debug("inside each, .id: "+answer.id);  // works
    _debug("inside each, byId .id: "+document.getElementById(answer.id));
  });
  _debug("outside each, byId literal: "+document.getElementById('answer_73'));
});

</script>
</head><body>

<div id="answer_72" class="answer"></div>
<div id="answer_73" class="answer">foo</div>
<div id="answer_74" class="answer"></div>

</body></html>

结果

  

FOO

     

每个内部,.id:answer_72

     

每个内部,byId .id:[object   HTMLDivElement]

     

每个内部,.id:answer_73

     

每个内部,byId .id:[object   HTMLDivElement]

     

每个内部,.id:answer_74

     

每个内部,byId .id:[object   HTMLDivElement]

     

每个外面,byId literal:[object   HTMLDivElement]

答案 2 :(得分:1)

你在那里的文件范围。我还建议您使用Firebug的console.log()函数代替alert()进行调试,然后编辑您的主题。