Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Clayder

Problemas com efeito mostrar e ocultar Div

Por , em Javascript

Recommended Posts

Clayder    0

Clayder
Postado

ola pessoal não possuo muito conhecimento em javascript , o problema esta no efeito de mostrar div como por exemplo neste link aqui

http://www.pontodabusca.com.br/test.php

 

nesse exemplo você clica em (clique aqui) , aí nisso abre uma div dentro dela possui um valor . O objetivo era quando vc clicar no clique aqui[0] a div seria aberta e dentro dela teria o valo 0 , e quando vc clicar no clique aqui[1] a div seria aberta e dentro dela teria o valo 1. Mas não é isso que acontece parece q o erro esta em passagem de parâmetro pois nas duas divs aparece o valo 0 , ou seja não esta atualizando o valor . O codigo esta aqui:

 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript">

            var div = "manipulada_anuncio";
            // atribuir o nome da div que quer mostrar e ocultar
 
            function AparecerDiv(){ // função aparecer
                document.getElementById(div).style.display = "block";
                // usamos o style.display para manupular o css da div e mostrar ela
            }
 
            function OcultarDiv(){  // função ocultar
                document.getElementById(div).style.display = "none";
                // usamos o style.display para manupular o css da div e ocultar ela
            }

 </script>

 

        <style>
            #manipulada_anuncio{
                width:310px;
                height:500px;
                -webkit-border-radius: 33px;
                -moz-border-radius: 33px;
                border-radius: 33px;
                background-color:#acacac;
                -webkit-box-shadow: #555555 3px 3px 3px;
                -moz-box-shadow: #555555 3px 3px 3px;
                box-shadow: #555555 3px 3px 3px;
                position: fixed;
                top: 30%;
                left: 50%;
                margin: -75px 0 0 -150px;
                display: none;
                z-index:1;
                overflow: auto;
            }
        </style>
 </head>
    <body>
        <?php
        for ($i = 0; $i < 2; $i++) {
            echo "<br>";
            ?>
            <a class="anuncio" style="cursor: pointer;" onClick="AparecerDiv();" >Clique aqui[<?php echo $i ;?>]</a> 
            <div id="manipulada_anuncio">
                
                <?php 
                    echo "<br>";
                    echo $i; 
                ?>

                <a class="fechar" onClick="OcultarDiv();" style="cursor: pointer;">[<u>x</u>]</a>
            </div>
            <?php
        }
        ?>
    </body>
</html>

Quem poder me ajudar , obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Naison Souza de Oliveira    0

Naison Souza de Oliveira
Postado

Olá Cleyder,

 

Pelo que pude observar em seu código, você esta utilizando o mesmo atributo id para todas divs que pretende manipular, o que não é correto, pois, o atributo id deve ser único na página. No seu caso, como o elemento está dentro do for, cada iteração gera o elemento com o mesmo id manipulada_anuncio, fazendo com que o browser sempre recupere o primeiro elemento, ignorando os demais.

 

Para resolver o seu problema, basta você utilizar no nome do seu id o índice do array, sendo assim seus id ficariam assim:

 

<div id="manipulada_anuncio_<? echo $i; ?>">

Entretanto, como você utiliza o id para exibir e esconder os elementos, então será necessário também passar o índice do array para os método javascript responsáveis por exibir/esconder, afim de, que ele manipule o elemento correto:

 

<a class="anuncio" style="cursor: pointer;" onClick="AparecerDiv( <?php echo $i; ?> );" >
<a class="fechar" onClick="OcultarDiv( <?php echo $i;?> );" style="cursor: pointer;">[<u>x</u>]</a>

E por fim é necessário alterar as funções javascript para que estas possam exibir e esconder a div relacionada ao elemento clicado:

 

<script type="text/javascript">

            var div = "manipulada_anuncio";
            // atribuir o nome da div que quer mostrar e ocultar
 
            function AparecerDiv( id ){ // função aparecer
                document.getElementById( div + id ).style.display = "block";
                // usamos o style.display para manupular o css da div e mostrar ela
            }
 
            function OcultarDiv( id ){  // função ocultar
                document.getElementById( div + id ).style.display = "none";
                // usamos o style.display para manupular o css da div e ocultar ela
            }

 </script>

Espero ter sido claro. :D

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito