Question

我正试图弄清楚如何将歌曲标题作为艺术家从这段代码中获取每个div。此代码将播放列表中的所有歌曲放入XML文件中。我的标题div是songTitle，艺术家div是艺术家。试过在getplayList函数中复制什么并删除输出，然后放入onsongSelect函数document.getElementById（“songTitle”）。innerHTML = title;但我只得到div中播放列表中的最后一首歌曲。任何帮助将不胜感激。

function getplayList()
    {
        var parser = new DOMParser();
        xmlDocument = parser.parseFromString(xml, "text/xml");
        var elementsArray = xmlDocument.documentElement.getElementsByTagName    ('composition');
        var arrayLength = elementsArray.length;
        var output = "<ul>";

        for(var i=0; i < arrayLength; i++)
        {
            var title = elementsArray[i].getElementsByTagName('title')[0].firstChild.nodeValue;
            var artist = elementsArray[i].getElementsByTagName('artist')[0].firstChild.nodeValue;
            var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue;
            var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;


            output +=  ("<li onclick='songSelect(\"" + fileName + "\")'>" + title + " -  " + artist + "</li>");


        }

            output += "</ul>";
            document.getElementById("playList").innerHTML = output;
    }

这是songSelect功能;

function songSelect(fn)
    {
        document.getElementById("songs").src = fn;
        playMusic();
    }

XML文件只显示了三首歌曲，还有更多要发布的内容：

var xml = '<?xml version="1.0" encoding="utf-8"?>';

xml +='<music>';
xml +='    <composition>';
xml +='    <title>Songs On The Radio</title>';
xml +='    <artist>No Justice</artist>';
xml +='    <time>4.24</time>';
xml +='    <filename>Songs On The Radio.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +='    <title>Chillin It</title>';
xml +='    <artist>Cole Swindell</artist>';
xml +='    <time>3.17</time>';
xml +='    <filename>Chillin It.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +='    <title>Tippin Point</title>';
xml +='    <artist>Dallas Smith</artist>';
xml +='    <time>2.58</time>';
xml +='    <filename>Tippin Point.mp3</filename>';
xml +=' </composition>';
xml +='</music>';

Answer 1

假设HTML已关闭，请不要关闭脚本中的ul。评论说出来有效。

请参阅：http://jsfiddle.net/s7mLL/1/

<强>更新

在这种情况下，您可以将songSelect方法更改为接受元素参数以获取点击的元素，假设您的div的ID为nowPlaying：

function songSelect(fn, element) {
    document.getElementById("songs").src = fn;
    playMusic();        
    document.getElementById("nowPlaying").innerHTML = "Now Playing: " + element.innerHTML
}

在for循环中进行以下更改：

output += ("<li onclick='songSelect(\"" + fileName + "\",this)'>" + title + " - " + artist + "</li>");

更新小提琴：http://jsfiddle.net/s7mLL/2/

我可能还建议你明星调查jQuery。它使这种DOM操作变得更加容易，并为您提供了更多。

进一步更新

我不会解析XML两次。更改方法参数以接受文件名和标题并传递那些

function songSelect(fileName, songTitle) {
        document.getElementById("songs").src = fileName;
        playMusic();        
        document.getElementById("nowPlaying").innerHTML = "Now Playing: " + songTitle
    }

在for循环中进行以下更改：

output += ("<li onclick='songSelect(\"" + fileName + "\",\"" + title + "\")'>" + title + " - " + artist + "</li>");

http://jsfiddle.net/s7mLL/4/

<强>加成

这是一个快速而又脏的jQuery演示：http://jsfiddle.net/U88UQ/

将标题和艺术家添加到DIV

1 个答案: