Question

我目前正致力于基于AJAX的功能，将YouTube视频加载到现有的div中。那部分工作得很好。

现在我想修改我的代码，以便我也可以获取每个视频的隐藏标题和说明，并在视频的上方和下方添加此数据（标题应在上方，描述应在youtube视频下方）。< / p>

问题是我不确定是谁实现了此修改。这是我到目前为止：

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

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

任何帮助表示感谢。

Answer 1

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

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

请注意，执行此操作时：

xmlHttpReq.onreadystatechange = HandleValue;

...你给javascript一个你希望js在将来某个日期调用的函数。当js调用该函数时，js不会用任何参数调用它。

从html元素获取数据并使用信息填充其他元素

1 个答案: