0

Estou tentando fazer com que ao clicar em um botão, o conteúdo da div ao lado fique editável.
Melhor visualizando o código:

<div id="nome" class="container">
    <div class="col-10">
        <p class="editar" contenteditable="false">Digite o nome</p>
    </div>
    <div class="col-2">
        <button>Editar</button>
    </div>
    <div id="Sobrenome" class="container">
        <div class="col-10">
            <p class="editar" contenteditable="false">Digite o Sobrenome</p>
        </div>
        <div class="col-2">
            <button>Editar</button>
        </div>
    </div>
</div>

Atualmente o jQuery está assim, mas ao clicar no botão são selecionados ambos os conteúdos.

$("button").click(function() {      
    if ($("div > .editar").attr("contenteditable") == "false") { 
        $("div > .editar").attr("contenteditable", "true");
        $("div > .editar").focus().text(""); 
        $("div > .editar").addClass("selecionado"); 
        $(this).text("Concluído"); 
    } else { 
        $("div > .editar").attr("contenteditable", "false"); 
        $("div > .editar").blur(); 
        $("div > .editar").removeClass("selecionado"); 
        $(this).text("Editar"); 

        if ($("div > .editar").is(":empty")) { 
            $("div > .editar").text("Digite o nome"); 
        }; 
    };
});

Não estou encontrando um modo para usar o .closest que acho que seria uma possível salvação para atribuir o botão clicado ao elemento da div ao lado, já que ambas tem o mesmo pai (a #nome ou #sobrenome).

2 Respostas 2

0

O problema que você está enfrentando é mais de semântica do HTML do que a função do click com JQuery. Você pode fazer dessa forma:

<div id="nome" class="container">
<div class="col-10">
    <label>Nome</label>
    <input type="text" class="inputs" value="Fulano" disabled/>
</div>
<div id="Sobrenome" class="container">
<div class="col-10">
    <label>Sobrenome</label>
    <input type="text" class="inputs" value="da Silva" disabled/>
</div>
<div class="col-2">
    <button id="editar">Editar</button>
</div>

$("#editar").on('click', function(event){
   event.preventDefault();
   $('.inputs').prop("disabled", false);
});

Segue exemplo funcional

1
  • Hmm, muito boa sua ideia! Mas pretendo separar em grandes grupos para futuras mudanças e preciso manter um botão para cada input(no caso).
    – user86267
    Commented 28/07/2017 às 14:34
0

Obrigado a todos que me ajudaram, e aos que estão tendo a mesma dificuldade, eis a solução que encontrei.

$(this).siblings()

Usado para pegar a div irmã do elemento e depois entrando no paragrafo.

Grato.

Você deve fazer log-in para responder a esta pergunta.