0 
$( 'li' ).on( 'click', function( event ) {
            console.log("inside music player");
            var projIndex = $(this).index();
            selectedMedia=$(this).text();
            console.log("------"+projIndex);
            console.log("------"+selectedMedia);
            var extension = selectedMedia.substr( (selectedMedia.lastIndexOf('.') +1) );
            console.log("extension-----"+extension);
            if(extension=="mp3" || extension=="wav")
                {
                var musicLink="#musicPlay_page";
                var selectedLink = document.getElementById('mediaLink'); 
                selectedLink.href=musicLink;
                $('#musicPlay_page').add(playMusicList(selectedMedia));
                }                         
            else if(extension=="mp4")
                {
                var videoLink="#videoPlay_page";
                var selectedLink = document.getElementById('mediaLink'); 
                selectedLink.href=videoLink;
                $('#videoPlay_page').add(playVideoList(selectedMedia));
            }

        });

在上面的代码中，我需要根据我选择的媒体类型（mp3 或 mp4）导航到两个不同的页面。如果它是 mp3，那么它应该导航到 musicPlay 页面，如果它是 mp4，它应该导航到 videoPlay 页面。当我单击列表中的第一个文件时，它运行良好，即它导航到其他页面，但是当我单击列表的第一个元素以外的其他页面时它不会导航到其他页面，而是在当前页面本身播放文件，请解决这个问题。

function onsuccess(files) {
        $('#media_list').remove();

        var d='<div id="media_list">';
        d += '<ul data-role="listview" style="list-style: none outside none;padding: 0;">'
            +'<div style="font-weight:bold;color:black;">';
        for(var i = 0; i < files.length; i++) {
            console.log("File Name is " + files[i].name); // displays file name

            if(files[i].isDirectory == false){      
                d+='<li style="vertical-align: top;">'
                    +'<a href="" id="mediaLink">'
                    +'<img src="/images/musicPlay_logo.jpg" id="musicPlay"/>'
                    +files[i].name
                    +'</a><hr color="black" size =1 width=500></li>';

            }
        }
        d+= '</div>';
        d+= '</ul>';
        d+= '</div>';
        $("#media_content").append(d);

}

这是我用来显示显示媒体文件列表的 html 内容的功能，您可以在“a”标签中看到我将 href 留空，以便在点击时进入点击功能，具体取决于我点击的文件格式转到 if 条件和页面应该打开

4

2 回答 2

0

这个问题真的很简单。您使用的是 ID 而不是类。ID 是唯一的，并且不超过 1 个元素应该具有相同的 id。在这里，您多次使用mediaLinkand id，而 JavaScript 只找到第一个匹配项，因为根据定义，不应该有更多匹配项。musicPlay将 id 更改为类，它们是可重用的标识符，如下所示：

d+='<li style="vertical-align: top;">'
    +'<a href="" class="mediaLink">'
    +'<img src="/images/musicPlay_logo.jpg" class="musicPlay"/>'
    +files[i].name
    +'</a><hr color="black" size =1 width=500></li>';

或者添加一些唯一的 ID 使其不会重复，例如循环计数器 ( i)，如下所示：

d+='<li style="vertical-align: top;">'
    +'<a href="" id="mediaLink-'+i+'">'
    +'<img src="/images/musicPlay_logo.jpg" id="musicPlay-'+i+'"/>'
    +files[i].name
    +'</a><hr color="black" size =1 width=500></li>';

然后更改您的点击处理程序以使用类/ID。如果没有相关的 HTML 代码，我只能这么说。如果您可以提供 HTML 代码，我可能会帮助您进一步更改处理程序的代码。

于 2014-08-07T21:46:42.997 回答
-3

而不是 if(extension=="mp3" || extension=="wav")

试试 if(extension.equals("mp3") || extension.equals("wav"))

于 2013-04-18T07:26:10.577 回答