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

Question

我目前正在开发基于 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>

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

任何帮助表示赞赏。

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 不会带任何参数调用它。