0

Tentei usar esta forma para "guardarmos" conteúdo (rodeado a azul na print) que seria mostrado após clicar no botao que contém a imagem. Mas não estou a conseguir pois o botão não funciona (não esconde o conteúdo )

inserir a descrição da imagem aqui

function myFunction(x) {
    if (x.matches) {
        $(document).ready(function () {
            $("#abrirlast1").click(function () {
                $("#urban1").toggle();
            });
        });
    }
}

function myFunction(x) {
    if (x.matches) {
        $(document).ready(function () {
            $("#abrirlast2").click(function () {
                $("#urban2").toggle();
            });
        });
    }
}

function myFunction(x) {
    if (x.matches) {
        $(document).ready(function () {
            $("#abrirlast3").click(function () {
                $("#urban3").toggle();
            });
        });
    }
}
.last {
    height: 100%;
    padding: 10px;
    text-align: center;
    background-image: url(./imagens/blackfundo2_baixo.jpg);
}

.tituloimg1{
    margin: 5px;
}

.videolast {
    background: red;
    width: 80vw;
    height: 20vh;
    margin-bottom: 10px;
}

.fecharlast {
   float:right;
   margin-bottom: 15px;
}
 <div class="last">

            <h3 class="titulolast">Histórias das vítimas</h3>
            <button id="abrirlast1">
                <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
            </button>

            <div id="urban1">
                <h4 class="tituloimg1"> Nome da vitima </h4>
                <div class="videolast"> </div>
                <button class="fecharlast" id="fecharlastid"> Fechar </button>
            </div>

            <div id="urban2">
                <button id="abrirlast2">
                    <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
                </button>
                <h4 class="tituloimg1"> Nome da vitima </h4>
                <div class="videolast"> </div>
                <button class="fecharlast" id="fecharlastid"> Fechar </button>
            </div>

            <div id="urban3">
                <button id="abrirlast3">
                    <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
                </button>
                <h4 class="tituloimg1"> Nome da vitima </h4>
                <div class="videolast"> </div>
                <button class="fecharlast" id="fecharlastid"> Fechar </button>
            </div>

        </div>

1
  • 1) Você está criando 3 funções com o mesmo nome, ou seja, você está sobrescrevendo elas e apenas 1 função está sendo realmente criada. 2) myFunction é criada mas nunca é executada, onde você chama ela? 3) Que tipo de dado é x? O que é x.matches? 4) Porquê você tem $(document).ready() dentro dos seus if? Você sabe o que isso faz? Commented 12/07/2019 às 18:01

2 Respostas 2

2

Cara ao meu ver essa parte do código não faz muito sentido...

function myFunction(x) {
        if (x.matches) {
            $(document).ready(function () { ....

Outro erro é que vc colocou o botão que faz o toggle dentro do próprio elemento que vai "togglar"... então uma vc que vc clica nele o conteúdo some, mas o botão tb ta sumindo junto! Assim vc não consegue clicar novamente para mostrar o conteúdo pq o botão some quando vc clica.

Remove essas linhas da função, até pq vc está usando ID para selecionar os elementos. Veja como fica

$(document).ready(function () {

$("#abrirlast1").click(function () {
    $("#urban1").toggle();
});

$("#abrirlast2").click(function () {
    $("#urban2").toggle();
});

$("#abrirlast3").click(function () {
    $("#urban3").toggle();
});

})
    .last {
        height: 100%;
        padding: 10px;
        text-align: center;
        background-image: url(./imagens/blackfundo2_baixo.jpg);
    }

    .tituloimg1 {
        margin: 5px;
    }

    .videolast {
        background: red;
        width: 80vw;
        height: 20vh;
        margin-bottom: 10px;
    }

    .fecharlast {
        float: right;
        margin-bottom: 15px;
    }
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="last">

    <h3 class="titulolast">Histórias das vítimas </h3>
    <button id="abrirlast1">
        <img class="img1" src="https://placekitten.com/24/24" width="100%" height="100%">
    </button>

    <div id="urban1">
        <h4 class="tituloimg1"> Nome da vitima 1</h4>
        <div class="videolast"> </div>
        <button class="fecharlast" id="fecharlastid"> Fechar </button>
    </div>

    <button id="abrirlast2">
        <img class="img1" src="https://placekitten.com/20/20" width="100%" height="100%">
    </button>
    <div id="urban2">
        <h4 class="tituloimg1"> Nome da vitima 2</h4>
        <div class="videolast"> </div>
        <button class="fecharlast" id="fecharlastid"> Fechar </button>
    </div>

    <button id="abrirlast3">
        <img class="img1" src="https://placekitten.com/22/20" width="100%" height="100%">
    </button>
    <div id="urban3">
        <h4 class="tituloimg1"> Nome da vitima 3</h4>
        <div class="videolast"> </div>
        <button class="fecharlast" id="fecharlastid"> Fechar </button>
    </div>

</div>

1

Seu código tem muitos problemas, um deles é a repetição do id="fecharlastid". Um id deve ser único na página, não pode haver dois elementos com o mesmo id.

Outra coisa, ainda mais grave, é a repetição de várias funções com o mesmo nome (parece que você gosta de repetir as coisas, hein! rs), e ainda colocando $(document).ready(function () { dentro da função, o que não faz sentido porque o evento ready é usado para verificar quando o DOM foi carregado. Sem falar que você abusa no uso de id's, o que é muito desnecessário.

Para fazer algo tão simples, pelo que foi entendido da pergunta, basta fazer a parte do HTML da forma mais simples possível. Vou deixar um exemplo abaixo, onde em nenhum momento precisei usar id's, apenas classes, e com 3 linhas de código já faz o que precisa:

$(".abrirlast, .fecharlast").on("click", function(){
   $(this)[ $(this).hasClass("abrirlast") ?  "next" : "parent" ]().toggle();
});
.last {
    height: 100%;
    padding: 10px;
    text-align: center;
    background-image: url(./imagens/blackfundo2_baixo.jpg);
}

.tituloimg1{
    margin: 5px;
}

.videolast {
    background: red;
    width: 80vw;
    height: 20vh;
    margin-bottom: 10px;
}

.fecharlast {
   float:right;
   margin-bottom: 15px;
}

.urban{
   display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="last">

   <h3 class="titulolast">Histórias das vítimas</h3>
   <button class="abrirlast">
       <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
   </button>
   <div class="urban">
       <h4 class="tituloimg1"> Nome da vitima </h4>
       <div class="videolast"> </div>
       <button class="fecharlast"> Fechar </button>
   </div>

    <button class="abrirlast">
        <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
    </button>
   <div class="urban">
       <h4 class="tituloimg1"> Nome da vitima </h4>
       <div class="videolast"> </div>
       <button class="fecharlast"> Fechar </button>
   </div>

    <button class="abrirlast">
        <img class="img1" src="./imagens/video_thumbnail.jpg" width="100%" height="100%">
    </button>
   <div class="urban">
       <h4 class="tituloimg1"> Nome da vitima </h4>
       <div class="videolast"> </div>
       <button class="fecharlast"> Fechar </button>
   </div>

</div>

Nesta parte:

$(this)[ $(this).hasClass("abrirlast") ?  "next" : "parent" ]().toggle();

Pego o evento de clique nas duas classes dos botões (abrir e fechar) e verifico se o que foi clicado possui a classe .abrirlast; se tiver, eu pego o elemento seguinte (next) e aplico o toogle; se não, eu pego o elemento pai (parent), significando que o botão clicado foi o de fechar.

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 .