2

O código abaixo é para mostrar e esconder o conteúdo de uma div.

Estou tentando usar ele para mostra alguns vídeos, porém não consigo fazer ele mostrar mais que 2 vídeos.

Veja o código:

Html

<button id="opt1">Option 1</button>
<button id="opt2">Option 2</button>

 <div class="yesDisplay">
<p>Video 01</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>

 <div class="noDisplay">
<p>Video 02</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>

CSS

 .noDisplay{display:none;}

 .yesDisplay{display:block;}

SCRIPT

$('#opt1').click(function(){
$('.yesDisplay').show();
$('.noDisplay').hide();
});

$('#opt2').click(function(){
$('.yesDisplay').hide();
$('.noDisplay').show();
}); 

Eu gostaria de mostrar até 8 vídeos nele e ao clicar em um botão a outra se esconda. Se possível fazer isso com JavaScript.

1 Resposta 1

3

Tens de programar o HTML e o JavaScript para serem escaláveis. Ou seja para funcionarem independentemente de quantos videos tens. Uma maneira de fazer isso seria assim:

var buttons = $('#videoGallery button');
var videos = $('#videoGallery div');

buttons.on('click', function () {
    var index = buttons.get().indexOf(this);
    videos.removeClass('yesDisplay');
    videos.eq(index).addClass('yesDisplay');
});

jsFiddle: http://jsfiddle.net/qhe7gfd3/

Este código assume que tens todos os button e div > iframe dentro de um wrapper #videoGallery e que todas essas div estão escondidas. Ou sejam, não precisas da classe noDisplay. E depois só adicionas e removes classes. Nada de .show() e .hide().

8
  • Poderia mostra esse exemplo com 6 videos ? estou tentando adiciona mais videos e ao clica no botão aparece 2 videos ao inves de 1 dentro da div
    – Endou
    Commented 11/06/2015 às 22:20
  • Eu tava fazendo errado, esqueci de fecha a ultima div. agora deu certo.
    – Endou
    Commented 11/06/2015 às 22:28
  • @user3192159 com 4: jsfiddle.net/qhe7gfd3/1
    – Sergio
    Commented 11/06/2015 às 22:29
  • É possivel fazer isso sem usar codigos externos? só com java script dentro do html? esse aqui não está funcionando <script> var buttons = $('#videoGallery button'); var videos = $('#videoGallery div'); buttons.on('click', function () { var index = buttons.get().indexOf(this); videos.removeClass('yesDisplay'); videos.eq(index).addClass('yesDisplay'); }); </script>
    – Endou
    Commented 11/06/2015 às 22:35
  • 1
    Ficou otimo, essa opção sem a necessidade de codigo externo, vou testa em alguns navegadores pra ver se funciona em todos.
    – Endou
    Commented 12/06/2015 às 0:11

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 .