javascript - jquery在互函数上传递参数

Question

我在 Jquery 中有两个函数，可以在单击时将 div 更改为 textarea，并在模糊时将其设为 div。我需要保存 div 的 id 并在嵌套的函数中使用它。如何在这两个函数之间传递 id ？ 这是我的代码，它将 id 检测为事件

function divClicked(id) {
  console.log("click");
  var divHtml = $(this).html();
  var editableText = $("<textarea />");
  editableText.val(divHtml);
  $(this).replaceWith(editableText);
  editableText.focus();
  // setup the blur event for this new textarea
  var iden = $(this).attr("id");
  editableText.blur(id, editableTextBlurred);
}

function editableTextBlurred(id) {
  console.log("blur");
  var html = $(this).val();
  var viewableText = $("<div>");
  viewableText.html(html);
  $(this).replaceWith(viewableText);
  var descr = viewableText.html();
  // setup the click event for this new div
  cool_function(id, descr);
  $(viewableText).click(id, divClicked);
}

Answer 1

好得多的方法是使用委托(delegate)事件处理程序在类型之间切换元素，如下所示:

$(document).on('click', 'div.switch', function() {
  var $textarea = $('<textarea />', { 
    class: 'switch',
    html: $(this).html(),
    id: this.id
  });
  $(this).replaceWith($textarea);
  $textarea.focus();
}).on('blur', 'textarea.switch', function() {
  var $div = $('<div />', {
    class: 'switch',
    html: this.value,
    id: this.id
  });
  $(this).replaceWith($div);
  cool_function(this.id, this.value);
});

function cool_function(id, html) {
  // your logic here...
  console.log(id, html);
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch" id="foo">Foo <strong>bar</strong></div>
<div class="switch" id="foo">Fizz buzz</div>

这种方法的好处是它可以在 HTML 中的任何 div.switch 实例上工作，而无需修改 JS，而且它只有两个事件处理程序而不必添加/每次交换元素时删除它们。

您可以走得更远，只使用 contenteditable div，但这取决于您的页面结构以及服务器接收数据的设置方式。