Question

我有一个脚本，在一些生成的元素上根据请求调用，并按id选择指定的元素。我遇到的奇怪问题是，select非常适用于页面上的第一个项目，但对于每个其他项目都返回null。可能是什么原因造成的？

以下是相关的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">&times;</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">&times;</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的一部分

<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>

Answer 1

您的HTML无效（没有结束表单标记）。怀疑是什么时候将HTML粘贴到JSFiddle中并查找任何红色突出显示的元素。

由于ID＆＃39; ed元素为form，因此页面出现问题。

如果你关闭第一个表单元素，第二个表单元素就可以了。

getElementById仅为第一个元素返回值

1 个答案: