3

Tenho vários registros em PHP, e ao clicar em um link "Mais informações" abre uma <div> oculta, porem ao clicar nessa link abre a <div> oculta de todos os registros.

Meu código do Javascript é o seguinte:

function abreFecha(sel) {
  $(sel).slideToggle();
}

css:

.mapa{
display:none;
}

link:

 <div class="maisinfo"><a href="javascript:abreFecha('.mapa')">+</a></div>

div:

<div class="mapa"> <?php echo $row_RS_busca['mapa']; ?> </div>

E outro detalhe, tudo isso está dentro de um PHP do. Ou seja está mostrando todos os registros.

Como pedido! Estou postando a estrutura do html

<?php do { ?>
    <div class="caixa">
     <div class="maisinfo"><a href="javascript:abreFecha('.mapa')">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6"><?php echo $row_RS_busca['telefone']; ?></td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa"> <?php echo $row_RS_busca['mapa']; ?> </div>

  <?php } while ($row_RS_busca = mysql_fetch_assoc($RS_busca)); ?>
5
  • 3
    Qual é a estrutura do HTML? em vêz de esse seletor que é genérico .mapa podias passar um elemento, ou outro seletor mais específico... se colocares a estrutura do HTML isso é fácil de resolver.
    – Sergio
    Commented 18/06/2015 às 18:17
  • Abre todos os registros pois o seletor de classe retorna uma lista, você tem de pegar o parent do botão clicado ou algo mais específico. Commented 18/06/2015 às 18:22
  • No lugar de passar .mapa, passa algo como #mapa1. Ao passar .mapa TODOS os elementos HTML com a classe .mapa vão abrir. Commented 18/06/2015 às 18:37
  • Obrigado por adicionares o HTML! Então o que precisas é abrir a div .mapa que está a seguir à div .caixa onde clicas no link dentro de .maisinfo, correto?
    – Sergio
    Commented 18/06/2015 às 21:28
  • Sim sergio, preciso disto. Porém quando clico abre todos Commented 19/06/2015 às 16:29

2 Respostas 2

2

Assumindo que seu código ja esta ok, e que você utiliza jquery, vou adicionar um identificador unico pra cada registro e por js chamar apenas esse identificador unico

Editando pra inserir um fiddle...

 $(function(){
      $('.maisinfo').click(function(){
         idclick = '.mapa_' + $(this).attr('rel');
         $(idclick).slideToggle();
      });

   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div class="caixa">
     <div><a href="#" class="maisinfo" rel="1">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6">TELEFONE</td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa_1" style="display:none">ABRE MAPA LINHA 1</div>
<!-- OUTRA LINHA -->

<div class="caixa">
     <div><a href="#" class="maisinfo" rel="2">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6">TELEFONE</td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa_2" style="display:none">ABRE MAPA LINHA 1</div>
<!-- OUTRA LINHA -->

<div class="caixa">
     <div><a href="#" class="maisinfo" rel="3">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6">TELEFONE</td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa_3" style="display:none">ABRE MAPA LINHA 3</div>
<!-- OUTRA LINHA -->

<?php 
$count=0;
do { 
?>
    <div class="caixa">
     <div><a href="#" class="maisinfo" rel="<?=$count;?>">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6"><?php echo $row_RS_busca['telefone']; ?></td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa_<?=$count;?>" style="display:none"> <?php echo $row_RS_busca['mapa']; ?> </div>

  <?php 
    $count++;
 } while ($row_RS_busca = mysql_fetch_assoc($RS_busca)); ?>

JS:

<script type="text/javascript">
   $(function(){
      $('.maisinfo').click(function(){
         idclick = '.mapa_' + $(this).attr('rel');
         $(idclick).slideToggle();
      });

   });
</script>
4
  • cara, não mostrou a div ao clicar Commented 18/06/2015 às 20:54
  • Adicionei um fiddle na resposta. Abre e veja o exemplo funcionando. SE atente ao fato de que eu alterei a classe "maisinfo" para o link, e no mesmo link adicionei a tag "rel" Commented 18/06/2015 às 21:20
  • Até ai o que você fez ta certo, porem eu não queria fazer uma div para cada linha, pois são muitos registros Commented 19/06/2015 às 16:18
  • O que você queria fazer então? Commented 22/06/2015 às 21:02
1

Aparentemente está a usar jQuery, no caso você poderia evitar usar o "protocolo" javascript: e usar algo menos obstrutivo como por exemplo $(document).on('click', seu seletor) combinado com a função .parents() (ou .parent) junto com .nextAll( ".mapa:first" ) do jquery também. Ficaria algo como:

JavaScript (pode fica dentro de um arquivo .js):

$(function() {
    $(document).on('click', '.caixa .maisinfo a', function() {
        var $this = $(this);

        $this.parent()
            .parent()
                .nextAll( ".mapa:first" ) //Isto vai procurar o mapa a seguir do elemento .caixa
                   .slideToggle();
    });
});

html:

<?php do { ?>
    <div class="caixa">
     <div class="maisinfo"><a href="javascript:void(0);">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6"><?php echo $row_RS_busca['telefone']; ?></td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa"> <?php echo $row_RS_busca['mapa']; ?> </div>

  <?php } while ($row_RS_busca = mysql_fetch_assoc($RS_busca)); ?>

$(function() {
    $(document).on('click', '.caixa .maisinfo a', function() {
        var $this = $(this);

        $this.parent()
            .parent()
                .nextAll( ".mapa:first" ) //Isto vai procurar o mapa a seguir do elemento .caixa
                   .slideToggle();
    });
});
.mapa{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="caixa">
 <div class="maisinfo"><a href="javascript:void(0);">+</a></div>
  <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
    <tr>
      <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
      <td height="31" colspan="2"><span class="style5">Nome 1</span></td>
    </tr>
    <tr>
      <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
      <td width="450" align="left" valign="bottom" class="style6">Telefone 1</td>
    </tr>
    <tr>
      <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
      <td align="left" valign="top" class="style6">Endereço 1</td>
    </tr>
    </table>
</div>
<br/>
<div class="mapa">Mapa 1</div>

<div class="caixa">
 <div class="maisinfo"><a href="javascript:void(0);">+</a></div>
  <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
    <tr>
      <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
      <td height="31" colspan="2"><span class="style5">Nome 2</span></td>
    </tr>
    <tr>
      <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
      <td width="450" align="left" valign="bottom" class="style6">Telefone 2</td>
    </tr>
    <tr>
      <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
      <td align="left" valign="top" class="style6">Endereço 2</td>
    </tr>
    </table>
</div>
<br/>
<div class="mapa">Mapa 2</div>

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 .