1

Olá, tenho o seguinte SCRIPT abaixo. Ele abre a DIV que está com display:none; porem vou ter uma lista de links para abrir novas DIV's e não quero ficar criando novas function para abrir cada DIV.

Como poderia resolver isso?

HTML

<a href="javascript:;" onClick="abre();">  Abrir div 01 </a>
<a href="javascript:;" onClick="abre1();"> Abrir div 02  </a>

<div id="box" class="bg-box">
    <img src="images/capa-revista.jpg" class="responsive-img">
    <a class="" onClick="fechar();"> fechar </a>
</div>

<div id="box" class="bg-box">
    <img src="images/capa-revista.jpg" class="responsive-img">
    <a class="" onClick="fechar1();"> fechar </a>
</div>

css

.bg-box{
    display:none;
    width:100%;
    height:100%;
    background-color:rgba(3, 3, 3, 0.8) !important;
    position:fixed; z-index:999;
    top:0px;
    left:0px;
    color:#999;
    font-size:16px;
}

JS

<script>
function abre() {
    $("#box").fadeIn(700);
}
function fechar() {
    $("#box").fadeOut(700);
}

function abre1() {
    $("#box1").fadeIn(700);
}
function fechar1() {
    $("#box1").fadeOut(700);
}
</script>

2 Respostas 2

0

Uma maneira mais intuitiva, é não fazer vários métodos, basta deixar a lógica dentro do script, e manter os elementos html independentes, veja:

<a href="javascript:void(0);" class="open-div" data-imagem="images/capa-revista1.jpg">  Abrir div 01 </a>
<a href="javascript:void(0);" class="open-div" data-imagem="images/capa-revista2.jpg">  Abrir div 02 </a>
<div id="box" class="bg-box">
    <img src="images/sem_imagem.jpg" class="responsive-img">
    <a href="javascript:void(0);" class="close-div"> fechar </a>
</div>

<script>
$(function() {
  var el = '#box';
    $(el).hide();
    $(document).on('click','.open-div', function() {
      var img = $(this).data('imagem');
         $('.responsive-img').attr('src', img);
         $(el).fadeIn(700);
    });
    $(document).on('click','.close-div', function() {
        $(el).fadeOut(700);
    });
});
</script>

Se quiser reduzir ainda mais:

 <a href="javascript:void(0);"  data-action="open" data-imagem="images/capa-revista1.jpg">  Abrir div 01 </a>
    <a href="javascript:void(0);" data-action="open" data-imagem="images/capa-revista2.jpg">  Abrir div 02 </a>


    <div id="box" class="bg-box">
        <img src="images/sem_imagem.jpg" class="responsive-img">
        <a href="javascript:void(0);" data-action="close"> fechar </a>
    </div>

    <script>
    $(function() {
        $('#box').hide();
        $('[data-action]').on('click',function() {
          var el = '#box';
          if ($(this).data('action') == 'open') {
          var img = $(this).data('imagem');
              $('.responsive-img').attr('src', img);
               $(el).fadeIn(700);
           } else {
               $(el).fadeOut(700);
           }
        });


    });
    </script>
2
  • Legal, muito obrigado ajudou muito de verdade. Felicidades.
    – user36373
    25/03/2016 às 17:47
  • Blz, sempre as ordens, se puder dar um +1 lá eu agradeço. 28/03/2016 às 12:27
0

Faça assim:


function abre(el) {
    $(el).fadeIn(700);
}
function fechar(el) {
    $(el).fadeOut(700);
}

E para chamar a funçao é só passar o id do elemento onClick="abre('#box');" e onClick="fecha('#box');" mas voce tem que colocar ids diferentes nos elementos.

3
  • faltou só o jogo da velha: abre('#box'); 24/03/2016 às 20:33
  • Mas deu certo meu exmplo? 24/03/2016 às 20:56
  • Opa, deu sim Bruno. Valeu pela ajuda.
    – user36373
    26/03/2016 às 1:30

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