2

Possuo esse codigo, ele mostra 1 video ao clicar em uma tabela.

É possivel altera a cor do elemento que foi clicado da mesma forma como se faz com links? mas com CSS?

Exemplo: video 1 cor vermelha, após ser clicado essa opção ficar cinza.

 <div class="videoGallery">
 <ul>
 <li>01 </li>
  <li><span class="ytVideo" data-videoid="UGPuEDyAsU8">Opção 1</span>   </li>
  <li><span class="uolVideo" data-videoid="16060482">Opção 2</span></li>
 <li><span class="close">Fechar</span></li>
 </ul>
 </div>
 <div class="videoGallery">
  <ul>
 <li> 02</li>
 <li><span class="ytVideo" data-videoid="nuzDvYdC_Ak">Opção 1</span></li>
  <li><span class="uolVideo" data-videoid="16041619">Opção 2</span></li>
  <li><span class="close">Fechar</span></li>
  </ul>
  </div>
  <div class="videoGallery">
  <ul>
  <li> 03</li>
  <li><span class="ytVideo" data-videoid="pFUMPnqnN2E">Opção 1</span>   </li>
   <li><span class="uolVideo" data-videoid="16026675">Opção 2</span></li>
   <li><span class="close">Fechar</span></li>
    </ul>
    </div>



   <style>

   .videoGallery {margin-bottom:5px;}
   .videoGallery ul {
    list-style: none;
     margin: 0;
      padding: 0;
      font-family: sans-serif;
       }

    .meuVideo {
     display: inline-block;
     background-color: Black;
     color: #fff;
     padding: 0px 3px;
     border: 0px solid steelblue;
      }
     .videoGallery li {
     display: inline-block;
     background-color: #A52A2A;
     color: #fff;
     padding: 4px 10px;
     border: 1px solid Black;
      }

     .videoGallery li:first-child,
     .videoGallery li:last-child {background-color:initial; color:#0000;     background-color: Black;}
     .videoGallery span {cursor: pointer;}

      i.nowPlaying {
      font-size: 13px;
      background: Black;
      margin-left: 15px;
       }
           </style>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
   <script type="text/javascript">
    var ytVideo = $('.videoGallery .ytVideo');
    var dailyMvideo = $('.videoGallery .dailyMvideo');
    var uolVideo = $('.videoGallery .uolVideo');
    var html5bgvideo = $('.videoGallery .html5bgvideo');
    var liHeight = $('.videoGallery li').height();

    // Youtube Video
     ytVideo.click(function(){
     var videoID = $(this).attr('data-videoID');
     var videos = $('<div class="meuVideo"> <iframe width="560"    height="315" src="https://www.youtube.com/embed/'+ videoID +'?autoplay=1" frameborder="0" allowfullscreen></iframe> </div>');

      $('.meuVideo, .nowPlaying').remove();
      $(this).parents().eq(2).append(videos);
      $('<i class="nowPlaying">▼ Reproduzindo ...</i>').insertAfter(this);
       });

      // UOL Video
      uolVideo.click(function(){
      var videoID = $(this).attr('data-videoID');
      var videos = $('<div class="meuVideo"> <video width="100%"  controls="controls" autoplay="true" src="http://video25.mais.uol.com.br/'+ videoID +'.mp4?r=http://player.mais.uol.com.br" type="video/mp4"" frameborder="0" allowfullscreen></video> </div>');

       $('.meuVideo, .nowPlaying').remove();
       $(this).parents().eq(2).append(videos);
       $('<i class="nowPlaying">▼ Reproduzindo ...</i>').insertAfter(this);


        });

       // Fechar Videos
       $('.close').click(function(){
       $('.meuVideo, .nowPlaying').remove();
       });
         </script>

1 Resposta 1

4

A maneira mais simples é juntar isto nos dois auscultadores de evento, que vai forçar a côr de fundo para preto, juntando um estilo diretamente no elemento:

$(this).closest('li').css('background-color', 'black');

assim: https://jsfiddle.net/x2uoxbLy/

outra opção é juntar uma classe, por exemplo:

.visitado {background-color: black !important;}

e no código ter

$(this).closest('li').addClass('visitado');

assim: https://jsfiddle.net/x2uoxbLy/

Edit, para ser persistente ao carregar da página:

Para o browser memorizar tens de gravar algo no servidor ou no computador do utilizador, como uma entrada no localStorage por exemplo.

Usando o localStorage podias fazer assim:

var linksVisitados = Visitados();
linksVisitados.forEach(function(link) {
    var li = document.querySelector(`[data-videoid="${link}"]`).parentElement;
    li.classList.add('visitado');
});

function Visitados(link) {
    var linksVisitados = JSON.parse(localStorage.linksVisitados || '[]');
    if (!link) return linksVisitados;
    linksVisitados.push(link);
    localStorage.linksVisitados = JSON.stringify(linksVisitados);
}

e depois em cada callback:

$(this).closest('li').addClass('visitado');
var videoID = $(this).attr('data-videoID');
Visitados(videoID);

assim: https://jsfiddle.net/r4L6f3p2/

12
  • Valeu Sergio, mas essa opção que vc mostrou, ela fica gravada no navegador ? tipo igual quando a gente já clicou em algum link e nos já sabemos que visitamos eles pq ele está de outra cor?
    – Endou
    22/11/2016 às 15:51
  • @Endou fica gravado até navegar para outra página, aí ele esquece. Se queres que ele lembre o utilizador tens de deixar um cookie, localstorage ou falar com o servidor se o utilizador estiver logado.
    – Sergio
    22/11/2016 às 15:52
  • Não teria como usar o Css :visited ou :target ?
    – Endou
    22/11/2016 às 16:02
  • @Endou queres que o browser saiba que o clique aconteceu mesmo depois de voltar à página?
    – Sergio
    22/11/2016 às 16:06
  • 1
    Valeu Sergio, vou fazer uns testes aqui, agora ficou otimo
    – Endou
    22/11/2016 às 19:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .