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).