Question

我知道这对你来说可能很容易，但我不知道如何找到解决方案，当我点击“编辑”按钮我想只删除按钮旁边的文字而不是所有这些...我怎么会做到了吗？

     $(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>

感谢您的帮助

Answer 1

您目前正在做的是选择页面中的所有.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);
      }
  })
})

希望有所帮助。

Answer 2

您可以在jQuery中使用.next()来访问选择器的下一个元素。由于您通过JavaScript绑定处理事件，因此您可以在按钮单击代码中执行composer install。

Answer 3

$('a').click(function() {
    $(this).closest('div').find('p.text').remove();
});

Answer 4

您想要实现的目标可以在一行中完成：

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

这就是为什么它可以用于此目的（你需要改变＆＃34;编辑＆＃34;到＆＃34;保存＆＃34;之后，但这是另一个主题）

＆＃13;

$('a').click(function(event) { 
  event.preventDefault();
  $(this).parent().prepend('<input type="text">').find('.text').remove();
});

＆＃13;

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

＆＃13;

单击许多元素中的一个元素

4 个答案: