2

Como faço pro jquery abrir apenas a box que cliquei, sem abrir as outras. Tentei usar $(this), mas eu não consegui. Não da maneira que quero.

HTML

<div class="main">
    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 1</p>
    </div>

    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 2</p>
    </div>

    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 2</p>
    </div>
</div>

JQuery

$(document).ready(function(){
    $(".icon-edita").click(function(){
        $(".Box_editor").show("slow", function(){});
    });
});

Não coloquei o css, pois já está correto o problema é no jquery msm. vlw o/

2
  • Cada Editar é suposto mostrar mostrar a Box_editor que está logo a seguir?
    – Isac
    17/01/2018 às 17:59
  • é sim isac. quando eu clicar no editar 1 a box 1 aparece
    – EDGNoizy
    17/01/2018 às 18:05

2 Respostas 2

2

Se quer mostrar a Box_editor a seguir a cada .icon-edita então tem de utilizar next() para chegar ao elemento da frente, que é a box, e nesse fazer show. Da forma que tem com $(".Box_editor").show( acaba por mostrar todos.

Se pretende mostrar e voltar a esconder cada vez que clica então será melhor utilizar toggle em vez de show

Exemplo:

$(document).ready(function(){
    $(".icon-edita").click(function(){
        $(this).next().toggle("slow");
    });
});
.Box_editor {
  display:none;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 1</p>
    </div>

    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 2</p>
    </div>

    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 3</p>
    </div>
</div>

1
  • Eu não sabia sobre o next() estava usando apenas (this), consegui aqui obg o/
    – EDGNoizy
    17/01/2018 às 18:15
1

Acho que vc tem que usar assim: $(this).find

$('.icon-edita').click(function(){
    $(this).find('.Box_editor').addClass(".slow");
    return false;
});

Confere o nome das classes. Dessa forma quando vc clica no elemento com a classe .icon-edita ele vai adicionar a classe .slow só ele e não em todos que tem o mesmo nome da classe

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 .