LuanMartinsTI 0 Denunciar post Postado Abril 2, 2017 galera, tudo bem? Então é muito fora da minha area de atuação javascript, então preciso de ajuda para algo que é bem simples de se fazer com java, ou c, mas como não atuo com javascript não consigo fazer, eu estou desenvolvendo um player, mas preciso fazer com que o botão de player e stop seja sempre ativo, digo da seguinte forma, quando a pessoa carrega o player ele vem com o botão de de player aparecendo, mas se clicar da stop, e o botão de player fica com a imagem do stop e a musica para, isso eu consigofazer, o problema é quando o cara tenta da play para escutar novamente, minha função falta um loop que sempre inverte, oque eu tenho é o seguinte: function PlayerPlay(){ document.getElementById('player2').muted = false; event.preventDefault(); $("#pause").css({"transition":"1s","display":"block", "z-index":"2"}); } function PlayerPause(){ document.getElementById('player2').muted = true; event.preventDefault(); $("#play").css({"transition":"1s","display":"block", "z-index":"1"}); } botão <td colspan="2"> <a onclick="PlayerPause()" id="pause"></a> <a onclick="PlayerPlay()" id="play"></a> <!-- --> </td> então se vocês conseguiram entender a gambiarra, mas para quem não vou explicar, eu fiz as duas funções, e tem dois botoes, porem um vem com z-index inferior e aparece atras do outro, e quando clica ele recebe um z-index maior, é provavelmente errado isso, como eu deveria fazer? Compartilhar este post Link para o post Compartilhar em outros sites
Eziquiel 96 Denunciar post Postado Abril 2, 2017 Pelo que entendi você precisa de apenas um botão, porém com duas funções. É isso? A maneira que creio ser mais efetiva seria inverter a classe do botão a cada click. Para isso eu faço assim: 1 - Crio apenas um elemento <a>, com a seguinte classe e id: <a class="play" title="Play" id="play-pause"></a> 2 - Depois eu crio um estilo para este elemento, onde teria os atributos genéricos, seguido dos atributos específicos para cada classe. Por exemplo: a#play-pause{ /*ESTILOS PARA O OBJETO, INDEPENDENTE SE FOR PLAY OU PAUSE*/ display: block; width: 64px; height: 64px; cursor: pointer; } #play-pause.play{ /*ESTILOS PARA QUANDO O OBJETO FOR TIPO PLAY*/ background: url(url da sua imagem "play") no-repeat; } #play-pause.pause{ /*ESTILOS PARA QUANDO O OBJETO FOR TIPO PAUSE*/ background: url(url da sua imagem "pause") no-repeat; } Aqui vem o script que alterna as classes, entre "play" e "pause": (usando a biblioteca jQuery). $('#play-pause').click(function(){ var classeAtual = $(this).attr('class'); if (classeAtual=='play'){ // coloque aqui o que quer que faça quando clicar no play } else { // coloque aqui o que quer que faça quando cliar no pause; } $(this).toggleClass('play').toggleClass('pause'); $(this).attr('title', classeAtual=='play'? 'Pause':'Play'); }); Exemplo prático: http://codepen.io/Eziquiel/pen/peGVex Compartilhar este post Link para o post Compartilhar em outros sites
LuanMartinsTI 0 Denunciar post Postado Abril 2, 2017 Quando vi o codigo, e fui la na exibição pensei, certamente vai funcionar, mas para minha surpresa não, não sei algo que tenha feito aqui, então criei até outro arquivo e fiz exatamente como na exibição do Pen e mesmo assim não foi. <!DOCTYPE html> <html lang="en"> <head> <script src="js/jquery-1.11.3.js" type="text/javascript"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script> $('#play-pause').click(function(){ var classeAtual = $(this).attr('class'); if (classeAtual=='play'){ alert('Clicou no Play'); } else { alert('Clicou no Pause'); } $(this).toggleClass('play').toggleClass('pause'); $(this).attr('title', classeAtual=='play'? 'Pause':'Play'); }); </script> </head> <body style="overflow: hidden;"> <style> a#play-pause{ display: block; width: 64px; height: 64px; cursor: pointer; border-radius: 50%; } /*ESTILOS PARA QUANDO O OBJETO FOR TIPO PAUSE*/ #play-pause.play{ background-image: url(http://png-2.vector.me/files/images/6/9/695406/icon_set_player_thumb); background-position: -82px -12px } #play-pause.pause{ background-image: url(http://png-2.vector.me/files/images/6/9/695406/icon_set_player_thumb); background-position: -82px -78px } </style> <a class="play" title="Play" id="play-pause"></a> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
Eziquiel 96 Denunciar post Postado Abril 2, 2017 Deixe assim o seu script. Implementei a função $(document).ready pra resolver esse problema. <script> $(document).ready(function(){ $('#play-pause').click(function(){ var classeAtual = $(this).attr('class'); if (classeAtual=='play'){ alert('Clicou no Play'); } else { alert('Clicou no Pause'); } $(this).toggleClass('play').toggleClass('pause'); $(this).attr('title', classeAtual=='play'? 'Pause':'Play'); }); }); </script> Compartilhar este post Link para o post Compartilhar em outros sites
LuanMartinsTI 0 Denunciar post Postado Abril 2, 2017 Cara funcionou perfeitamente, vlw, á a manha de quem entende o que fala! Compartilhar este post Link para o post Compartilhar em outros sites
Eziquiel 96 Denunciar post Postado Abril 2, 2017 Reparei que você está chamando duas vezes a biblioteca JQuery. Use apenas uma delas. Veja: <script src="js/jquery-1.11.3.js" type="text/javascript"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> São a mesma biblioteca. A diferença é que uma delas está formatada com identação, espaços, quebra de linhas, etc... enquanto a outra não está formatada. Ambas são idênticas em conteúdo. A questão do seu problema é a seguinte: como você criou seu script no inicio (antes do elemento <a> ser criado), então não funcionou. Com esta função o seu script foi carregado somente depois que todo o documento foi criado, resolvendo o problema. Abraço. Compartilhar este post Link para o post Compartilhar em outros sites
