3

Estou utilizando a "clonagem" de divs em jquery, e dentro delas tenho outras divs que ao clicar em um botão ex.: DIV 1, DIV 2, DIV 3 com javascript mostra o conteúdo de cada div. Só que ao adicionar a nova div(clonada) quando clicar no botão para mostrar a div ocultada dentro da clonada aparece a mudança somente na div original, e na clonada fica igual..

Ao utilizar o comando "CLONAR" do Jquery na div "engloba" só funciona o mostrar/ocultar na original e não na clonada.

SEGUE ABAIXO:

<script>
function Listagem(tr) {
 
if (tr == 1) {
document.getElementById('div1').style.display="block";
document.getElementById('div2').style.display="none";
document.getElementById('div3').style.display="none";

}else if (tr == 2) {
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="block";
document.getElementById('div3').style.display="none";
}
else if (tr == 3) {
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="none";
document.getElementById('div3').style.display="block";
}
</script>

<!--  Clona DIVS em jquery-->	
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
 
$("#mais").click(function() {
linha = $("#engloba").html();
$("#conteudo_engloba").append("<br />"+linha+"<br />");
});
 
});
</script>
<!-- botao que "clona" a div (engloba)  -->
<form>
<input type="button" name="" value="+" id="mais">
</form>

<div id="conteudo_engloba">
<div id="engloba">

<a onClick="Listagem(1);" id="btDetalhes" >DIV1</a>
    <a onClick="Listagem(2);" id="btDetalhes" >DIV2</a>
    <a onClick="Listagem(3);" id="btDetalhes" >DIV3</a>

<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>

</div>
</div>

4
  • Da pra mostrar seu código? html e js
    – Giovane
    4/11/2016 às 0:11
  • Coloque seu código (html, css e javascript) aqui, ou melhor ainda, no jsfiddle que será mais fácil lhe ajudar.
    – Almeida
    4/11/2016 às 1:10
  • Alterei e adicionei o código para ficar melhor...
    – Alh
    4/11/2016 às 1:51
  • Certamente o problema é que você faz tudo pelo ID das divs, e quando você clona, acaba clonando isso também, o ideal é que você alterasse essa informação ao clonar
    – Sorack
    4/11/2016 às 5:34

1 Resposta 1

3

Em HTML não podes ter mais do que um elemento com ID duplicada. O .getElementById() procura um elemento único, e quando tens vários elementos com a mesma ID a coisa deixa de funcionar como esperas.

Para além disso fica uma sugestão de simplificação de código. Assim podes adicionar N linhas e o display = 'block' ou display = 'none' não precisa de ser tão longo e demasiado adaptado.

Repara que fiz mudanças no HTML e no JavaScript

function Listagem(index, el) {
    var divs = el.parentElement.querySelectorAll('div');
    for (var i = 0, l = divs.length; i < l; i++) {
        divs[i].style.display = i == index ? 'block' : 'none';
    }
}
$(document).ready(function() {
    var linha = $(".engloba:first").clone();
    $("#mais").click(function() {
        $("#conteudo_engloba").append(linha.clone());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- botao que "clona" a div (engloba)  -->
<form>
    <input type="button" name="" value="+" id="mais">
</form>

<div id="conteudo_engloba">
    <div class="engloba">
        <a onClick="Listagem(0, this);">DIV1</a>
        <a onClick="Listagem(1, this);">DIV2</a>
        <a onClick="Listagem(2, this);">DIV3</a>

        <div>DIV 1</div>
        <div>DIV 2</div>
        <div>DIV 3</div>
    </div>
</div>

jsFiddle: https://jsfiddle.net/pfmfoe30/

6
  • Sérgio, agora que consertei uma coisa estragou outra.. Dentro dessas divs tenho SELECT que abre outras divs(que troquei por span para funcionar com seu código)...Tipo select option 1 abre div1, option 2 abre div 2... A questão é, Como fazer um select com Onclick para abrir essas divs dentros das divs que foram clonadas
    – Alh
    4/11/2016 às 21:25
  • @Alh usa o meu jsFiddle e adapta. Coloca de volta aqui que eu dou uma olhada.
    – Sergio
    4/11/2016 às 21:30
  • segue adaptação do html do jsFiddle jsfiddle.net/pfmfoe30/11
    – Alh
    5/11/2016 às 4:47
  • @Alh vi agora o teu jsFiddle. Acho que esse problema pertence a outra pergunta. O que perguntaste aqui "Div clonada (jquery) elementos só funcionam na div Original" respondi em cima: IDs duplicados, etc... mas se quiseres colocar outra pergunta posso ajudar claro (ou outros utilizadores do site).
    – Sergio
    5/11/2016 às 8:37
  • exatamente isso... Os elementos só estão funcionando na div original e não na clonada.. No caso funcionou para ocultar/mostrar a div principal, agora falta o SELECT e o CHECKBOX ocultar/mostrar a divs internas! Foi isso que adicionei ao HTML do jsfiddle, pois a tua resposta funcionou na div principal da clonada, agora falta a Div filho e "Neto" da principal funcionar De acordo com o selects e checkbox, seguindo o raciocionio da tua resposta da div principal.
    – Alh
    5/11/2016 às 18:01

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 .