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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -