Question

我有一个问题，一直困扰我一天，也许你可以帮助我。见下面的代码：

HTML：

<div class="panel-body">
<div class"in-between header">
</div>
<div class="well well-lg">
<div class="readmore">
</div>
</div>
<div class="knoppen">
<span id="editconfirm" style="font-size: 80%;"></span>
</div>
<div class="pull-right">
<a href="javascript:void(0);" class="edit">Edit</a>
</div>

jQuery的：

$('.edit').on('click',function(){

var m = $(this).closest('.panel-body').find('.well-lg').attr('msgid');

$(this).closest('.panel-body').find('.well-lg').attr('contenteditable','true');
$(this).closest('.panel-body').find('.well-lg').css("background-color", "#fff");
$(this).closest('.panel-body').find('.well-lg').css("border", "solid 1px #ccc");
$(this).closest('.panel-body').find('.well-lg').css("outline-style", "none");
$(this).closest('.panel-body').find('#stop').css("display", "block").hide().fadeIn("slow");
$(this).closest('.panel-body').find('#bewaar').css("display", "block").hide().fadeIn("slow");
$(this).closest('.panel-body').find('#editconfirm').html("Note: click on <strong>read more</strong> before editing large posts. " + m).hide().fadeIn("slow");

$.post("editmsg.php",
        {
          m: m
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
$(this).closest('.panel-body').find('.well-lg').html(data);
    });
});

我想要发生的是，当用户决定编辑他们的帖子时，要编辑的文本将从数据库中获取并替换可见的文本。这是因为表情符号的存在，这些表情组合在加载时被表情图像取代。由于我只能让它们编辑文本，因此图像将被删除，并且字符组合将不会保存在数据库中。笑脸的丢失就是这样的结果。

这段代码的作用是它确实使得正确的div可编辑以及需要完成的所有其他操作。唯一没有发生的事情是当前可见的文本被可编辑的文本替换（因此包括加载时被替换为笑脸的char组合）。

.closest().find()公式完美地找到了所需的div，但在funtion(data,status)公式之后，它似乎找不到它了。 $.post语句用作警报向我显示要从数据库中提取的正确数据，包括char combi和all。我尝试了.prev()，prevAll(divname)，.parent().child()，parent().children()，在发表声明之后似乎并不喜欢其中的任何一个，坦率地说它是在驾驶我现在很疯狂。

我在这里做错了什么？任何帮助将不胜感激！谢谢，如果不清楚，请这样说：）

Answer 1

你可以试试这个：

$('.edit').on('click',function(){

    var panelbody = jQuery(this).closest('.panel-body') ;

    var m = panelbody.find('.well-lg').attr('msgid');

    panelbody.find('.well-lg').attr('contenteditable','true');
    panelbody.find('.well-lg').css("background-color", "#fff");
    panelbody.find('.well-lg').css("border", "solid 1px #ccc");
    panelbody.find('.well-lg').css("outline-style", "none");
    panelbody.find('#stop').css("display", "block").hide().fadeIn("slow");
    panelbody.find('#bewaar').css("display", "block").hide().fadeIn("slow");
    panelbody.find('#editconfirm').html("Note: click on <strong>read more</strong> before editing large posts. " + m).hide().fadeIn("slow");

    $.post(
        "editmsg.php",
        {m: m},
    function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
        panelbody.find('.well-lg').html(data);
    });
});

我不确定你想要做什么但是在你的代码中，函数中的$（this）（数据......）并不是指之前的$（this），因为它在功能背景。

如果您想拥有相同的内容，请将jQuery(this).closest('.panel-body')保存在var中，这样您就可以在发布数据后重复使用它。

Answer 2

在$ .post和成功函数的范围内，this意味着不同的东西。它包含整个ajax对象，而不是单击的元素。

将this的值存储在外部作用域中，并使用内部的变量。为了使所有DOM搜索更容易，我建议你制作一些变量来保存不同的元素：

$('.edit').on('click', function () {
  var clicked = $(this);
  var panelBody = clicked.closest('.panel-body');
  var wellLg = panelBody.find('.well-lg');

  var m = wellLg.attr('msgid');

  wellLg.attr('contenteditable','true');
  wellLg.css("background-color", "#fff");
  wellLg.css("border", "solid 1px #ccc");
  wellLg.css("outline-style", "none");
  panelBody.find('#stop').css("display", "block").hide().fadeIn("slow");
  panelBody.find('#bewaar').css("display", "block").hide().fadeIn("slow");
  panelBody.find('#editconfirm').html("Note: click on <strong>read more</strong> before editing large posts. " + m).hide().fadeIn("slow");

  $.post("editmsg.php", { m: m }, function(data,status) {
    wellLg.html('This is the response. It Works fine!');
    //wellLg.html(data);
  });
});

代码段：http://jsfiddle.net/ejnqa2Ly/1/

Jquery在发布后没有选择最接近的div

2 个答案: