getElementById仅为第一个元素返回值 [英] getElementById returning value only for first element
本文介绍了getElementById仅为第一个元素返回值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个脚本，在一些生成的元素上根据请求调用，并按id选择指定的元素。我遇到的奇怪问题是，select非常适用于页面上的第一个项目，但对于每个其他项目都返回null。造成这种情况的原因是什么？
I have a script which is called on request on some generated elements, and selects specified element by id. The bizarre issue I'm experiencing is that the select perfectly works for the first item on the page but returns null for every other item. What could be the cause of this?
以下是相关的Javascript：
Here's the relevant Javascript:
<script type="text/javascript">
function showFrame(content, id, vid, crating)
{
var container = document.getElementById(vid+'_container');
$('#'+vid+'_embed').html(content);
$('#'+vid+'_embed iframe').attr('SCROLLING', 'YES');
var linkform = document.getElementById(vid + '_linkform');
linkform.setAttribute('action', '{{ url('/links/reportLink/') }}' + '/' + id);
$(document).on('submit', '#' + vid+ '_linkform', function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
beforeSend: function()
{
$('#ajax-loading').show();
},
success : function( data ) {
if (data == '{{trans("main.embeds report success")}}')
{
$('#'+vid+'_report-responses').html('<div class="alert alert-success alert-dismissable">{{ trans("main.embeds report success") }}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
}
else
{
console.log(data);
$('#'+vid+'_report-responses').html('<div class="alert alert-danger alert-dismissable">' + 'An error occurred while trying to report this link..' + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
}
},
error : function( xhr, err ) {
alert(err);
}
});
return false;
});
$('#input-'+vid).rateit('value', crating);
$('#input-'+vid).bind('rated', function(e){
var ri = $(this);
var value = ri.rateit('value');
ri.rateit('readonly', true);
$.ajax({
url : '{{ url('/links/rateLink/') }}',
type : 'GET',
data : {id: id, value: value},
beforeSend: function()
{
$('#ajax-loading').show();
},
success : function( data ) {
console.log(data);
},
error : function( xhr, err ) {
alert(err);
ri.rateit('readonly', false);
}
});
});
container.style.display = 'block';
return false;
}
</script>
这里是html的一部分
And here part of the html
<div id="93_container" style="display:none">
<div class="embed-container" id="93_embed">
</div>
<div class="rateit" style="margin: 12px 0px;" id="input-93" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">
Rate Link
</div>
<a style="float: right; color: white;" href="javascript:void(0);" onclick="toggleDiv('93');" title="Hide View" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i> Hide View</a>
<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="93_linkform" style="color: white; margin: 2px; float: right">
<input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P">
<a href="http://varmium.com/login" title="Bad Link" class="btn btn-default no-bord-left"><i class="fa fa-trash-o"></i> Bad Link</a>
</div>
<div class="row responses" id="93_report-responses" style="clear: both;">
</div>
<p>
</p>
<span class="row grey-out">
Release Date: 2014-04-06
</span>
</div>
</div>
<hr>
<div class="media col-sm-12">
<div class="pull-left col-sm-3">
<img src="http://image.tmdb.org/t/p/w300/oGkDVdlPewF60qwKfWfyhWTXL5f.jpg" alt="Poster of The Lion and the Rose" class="media-object img-responsive thumb">
</div>
<div class="media-body col-sm-9">
<style>
.embed-container { position: relative; clear:both; padding-bottom: 56.25%; padding-top: 30px; height: 100%; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="links-section">
<h3>
View
</h3>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('\x3Ciframe\x20width\x3D\x22640\x22\x20height\x3D\x22360\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fvodlocker\x2Ecom\x2Fembed\x2Dwqploakgu4sj\x2D640x360\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 255, 94,10); return false;">http://vodlocker.com</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('\x3Ciframe\x20width\x3D\x22640\x22\x20height\x3D\x22360\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fplayed\x2Eto\x2Fembed\x2Dtkzyscs3q4dr\x2D640x360\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 256, 94,10); return false;">http://played.to</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('\x3Ciframe\x20width\x3D\x22910\x22\x20height\x3D\x22425\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fthefile\x2Eme\x2Fembed\x2D1ojtp8mmg9y3\x2D910x405\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 257, 94,10); return false;">http://thefile.me</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
</div>
<div id="94_container" style="display:none">
<div class="embed-container" id="94_embed">
</div>
<div class="rateit" style="margin: 12px 0px;" id="input-94" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">
Rate Link
</div>
<a style="float: right; color: white;" href="javascript:void(0);" onclick="toggleDiv('94');" title="Hide View" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i> Hide View</a>
<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="94_linkform" style="color: white; margin: 2px; float: right">
<input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P">
<a href="http://varmium.com/login" title="Bad Link" class="btn btn-default no-bord-left"><i class="fa fa-trash-o"></i> Bad Link</a>
</div>
<div class="row responses" id="94_report-responses" style="clear: both;">
</div>
<p>
</p>
<span class="row grey-out">
Release Date: 2014-04-13
</span>
</div>
</div>
<hr>
<div class="media col-sm-12">
<div class="pull-left col-sm-3">
<img src="http://image.tmdb.org/t/p/w300/2FHwJZA82xHGMZE15Uq7IvW9grJ.jpg" alt="Poster of Breaker of Chains" class="media-object img-responsive thumb">
</div>
推荐答案
您的HTML无效（没有关闭表格标签）。什么时候怀疑将HTML粘贴到JSFiddle中并查找任何红色突出显示的元素。
Your HTML is invalid (no closing form tags). When is doubt paste your HTML into JSFiddle and look for any red-highlighted elements.
因为ID元素是形式 s页面出现问题。
As the ID'ed elements are forms it is having problems with the page.
如果你关闭第一个表单元素，第二个表单元素就可以了。
If you close the first form element the second one is found fine.
这篇关于getElementById仅为第一个元素返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
