javascript - issue in if condition for page navigation -
$( '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)); } });
in above code need navigate 2 different pages depending upon type of media select ( mp3 or mp4). if it's mp3 shoul navigate musicplay page , if it's mp4 should navigate videoplay page.it works when click first file in list i.e navigates other page , when click other first element of list doesn't navigate other page instead plays file in current page , please solve problem.
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 = 0; < files.length; i++) { console.log("file name " + 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);
}
this function used display html content displays list of media files, can see in 'a' tag left href blank on click goes click function , depending upon format of file clicked goes if condition , page should opened
the issue simple. you're using id's instead of classes. ids unique, , no more 1 element should have same id. here you're using medialink
, musicplay
ids multiple times, , javascript finds first match, since definition, there shouldn't more. change ids classes, reusable identifiers, this:
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>';
or add unique id not repeat, such loop counter (i
), shown below:
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>';
then alter click handler use class/id instead. without relevant html code, can say. if can provide html code, might able assist further in altering handler's code.
Comments
Post a Comment