Changes element color when clicked

Question

Changes element color when clicked

Navigation

#1 by (4 votes)

2

I have this code, it shows 1 video when clicking on a table.

Is it possible to change the color of the element that was clicked in the same way as with links? but with CSS?

Example: video 1 red color, after clicking this option turn gray.

 <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>

<scripttype="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>

jquery css

asked by anonymous 22.11.2016 / 16:36

1 answer

Parameters for external call Where to put the View Model rule

score 4 · Accepted Answer

The simplest way is to put this in the two event headphones, which will force the background to black, by typing a style directly into the element:

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

like this: link

Another option is to join a class, for example:

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

and in the code ter

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

like this: link

Edit, to be persistent when loading page:

For the browser to save you have to save something on the server or the user's computer, such as an entry in the localStorage for example.

Using localStorage you could do this:

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);
}

and then on every callback:

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

like this: link