Я знаю, что это может быть легко для вас, но я не знаю, как найти решение, когда я нажимаю кнопку «изменить», я хочу удалить только текст рядом с кнопкой, а не все из них ... как бы я это сделал?

     $(document).ready(function () {
        $("a").click(function () {
            click()
        })
    })

    function click() {
        var text = $(".text").text();
        alert(text)
        $(".text").remove();
        $(".contenu").prepend("<input class='input' type='text'>")
        $("input").val(text)
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="new">
    <div class="contenu" style="margin: 40px;">
        <p style="padding:0; margin:0; float: left;" class="text">Text</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">edit</a>
    </div>

    <div class="contenu" style="margin: 40px;">
        <p style="padding:0; margin:0; float: left;" class="text">Text</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">edit</a>
    </div>

</section>

Спасибо за вашу помощь

0
TaouBen 4 Сен 2017 в 05:42

4 ответа

Лучший ответ

То, чего вы пытаетесь достичь, можно сделать в одной строке:

$(this).parent().prepend('<input type="text">').find('.text').remove();

И вот как это будет работать для этой цели (после этого вам нужно будет изменить «Изменить» на «Сохранить», но это уже другая тема)

$('a').click(function(event) { 
  event.preventDefault();
  $(this).parent().prepend('<input type="text">').find('.text').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="new">
    <div class="contenu" style="margin: 40px;">
        <p style="padding:0; margin:0; float: left;" class="text">Text</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="edit" href="">edit</a>        
    </div>

    <div class="contenu" style="margin: 40px;">
        <p style="padding:0; margin:0; float: left;" class="text">Next</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">edit</a>
    </div>

</section>
0
Aydin4ik 4 Сен 2017 в 03:10

Вы можете использовать .next() в jQuery для доступа к следующему элементу селектора. поскольку вы передаете событие через привязку JavaScript, вы можете сделать $(this).next() в своем коде нажатия кнопки.

0
nnnnnn 4 Сен 2017 в 03:27

В данный момент вы выбираете все .text на странице:

$(document).ready(function () {
  $("a").click(function () {
      click()
  })
})

function click() {
  var text = $(".text").text();
  alert(text)
  $(".text").remove();
  $(".contenu").prepend("<input class='input' type='text'>")
  $("input").val(text)
}

Чтобы получить желаемый результат, вы должны изменить способ обработки click():

$(document).ready(function () {
  $("a").click(function () {
      // find text if there is one
      var text = $(this).find(".text").text();
      // get the parent of this element where the click orignated.
      var parent = $(this).parent(".contenu");
      // find a .text element inside parent
      $(parent).find(".text").remove();
      // add it
      $(parent).prepend("<input class='input' type='text'>");
      // set the value
      if (text) {
           // make sure text is not undefined
           $(parent).find("input").val(text);
      }
  })
})

Надеюсь, это поможет.

1
masterpreenz 4 Сен 2017 в 02:50
$('a').click(function() {
    $(this).closest('div').find('p.text').remove();
});
0
Sherwin 4 Сен 2017 в 03:00