0

我目前正在开发基于 AJAX 的功能，以将 youtube 视频加载到现有 div 中。那部分工作得很好。

现在我想修改我的代码，以便我还可以为每个视频获取隐藏的标题和描述，并将这些数据添加到视频的上方和下方（标题应该在上方，描述应该在 youtube 视频下方）。

问题是我不确定谁来实现这个修改。这是我到目前为止所拥有的：

我的Javascript：

<script language="javascript" type="text/javascript">

    function SendValue(v) {
            xmlHttpReq = new XMLHttpRequest();
            xmlHttpReq.onreadystatechange = HandleValue;
            xmlHttpReq.open("GET", "srcsendback2.php?code="+v,true);
            xmlHttpReq.send();
            }


    function HandleValue(Code) {
            if(xmlHttpReq.readyState == 4) {
                if(xmlHttpReq.status == 200) {

                    var Code;
                    var CodeTitle;
                    var CodeDesc;
                    var Code = xmlHttpReq.responseText;

                    CodeTitle = code + "-title";
                    CodeDesc = code + "-desc";



                    document.getElementById('vidtitle').innerHTML = document.getElementsByClassName('CodeTitle').innerHTML
                    document.getElementById('viddesc').innerHTML = document.getElementsByClassName('CodeDesc').innerHTML
                    document.getElementById('ytvid').src = document.getElementsByClassName('Code')[0].getElementsByTagName('a')[0].href

                    window.scroll(0,0); // horizontal and vertical scroll targets, scrolls page to the top
                } 
            }       
</script>

这是一些示例html：

        <h1 id="vidtitle"></h1>
        <div id="videoDiv">
            <iframe id="ytvid" width="500" height="300" frameborder="0" src="http://www.youtube.com/embed/xyz" frameborder="0" allowfullscreen></iframe>
        </div>
        <p id="viddesc"></p>


        <div id="links">



                <button type="button" name="button" onClick="SendValue('abc')" value="http://www.youtube.com/embed/123">Title 1</button> <br />

                <button type="button" name="button" onClick="SendValue('def')" value="http://www.youtube.com/embed/456">
Title 2</button> <br />

                <button type="button" name="button" onClick="SendValue('ghi')" value="http://www.youtube.com/embed/789">Title 3</button> <br />


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

                <ul class="media-collection">

                    <li>
                        <div class="m-left">
                            <a href="#">
                        </div>

                        <div class="m-right">

                            <p class="CodeTitle">
                                <a href="http://www.youtube.com/embed/123">
                                    <span class="field-content">Title 1</span>
                                </a>
                            </p>

                            <p></p>

                            <div class="CodeDesc">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis metus et lectus venenatis rhoncus. Suspendisse potenti. Maecenas bibendum nisi ut velit luctus ultricies. Mauris at nibh a elit pretium varius. Nunc accumsan sagittis augue at facilisis. Phasellus et ante lorem, vitae laoreet enim. Donec vulputate, velit a lobortis eleifend, neque nibh rhoncus quam, non pharetra turpis mauris sed ligula. Ut rhoncus, felis ac scelerisque volutpat, turpis elit malesuada ante, vel varius lorem erat dapibus mi. Nullam nulla risus, aliquam sed tempus eu, dictum a est. 
                                </p>
                            </div>

                            <p></p>

                        </div>
                    </li>

                </ul>

            </div>

        </div>

抱歉，如果我无法清楚地描述我的问题。

任何帮助表示赞赏。

4

1 回答 1

0

要查找标题，您可以执行以下操作：

  var p = document.getElementsByClassName('CodeTitle')[0];
  var span = p.getElementsByTagName('span')[0];
  alert(span.childNodes[0].nodeValue);

请注意，当您这样做时：

xmlHttpReq.onreadystatechange = HandleValue;

...您正在为 javascript 提供一个您希望 js 在未来某个日期调用的函数。当 js 调用该函数时，js 不会使用任何参数调用它。

于 2013-06-05T12:11:28.027 回答