javascript - 当它更改为输入字段时，如何获得相同的 DIV 名称或 id

Question

我想制作像 MySQL 一样的可编辑列表，但是当它更改为输入字段时我无法获得相同的 DIV id...任何人都可以告诉我如何做到这一点...

这是我的代码...

//<![CDATA[
$(window).load(function() {
  $.fn.editable = function() {
    var textBlocks = $(this);

    for (var i = 0; i < textBlocks.length; i += 1) {
      var textBox = $('<input class="my-text-box" onchange="myFunction(this.value)" />');
      var textBlock = textBlocks.eq(i);
      textBox.hide().insertAfter(textBlock).val(textBlock.html());
    }

    textBlocks.dblclick(function() {
      toggleVisiblity($(this), true);


    });

    $('.my-text-box').blur(function() {
      toggleVisiblity($(this), false);
    });

    toggleVisiblity = function(element, editMode) {
      var textBlock,
        textBox;

      if (editMode === true) {
        textBlock = element;
        textBox = element.next();
        textBlock.hide();
        textBox.show().focus();
        textBox[0].value = textBox[0].value;
      } else {
        textBlock = element.prev();
        textBox = element;
        textBlock.show();
        textBox.hide();
        textBlock.html(textBox.val());
      }
    };
  };

  var $edit = $('.makeEditable').editable();
});


function myFunction(val) {
  document.writeln(val);
}

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<div class="makeEditable" id="fname">First Name</div>
<div class="makeEditable" id="lname">Last Name</div>
<div class="makeEditable" id="contacts">00 000 0000</div>
<div class="makeEditable" id="email">test@yourdomain.com</div>

请帮助我......

Answer 1

当输入字段更改为如下所示时，您可以获取 div id。

在 if (editMode === true) {} block 中添加 var divId = element.attr('id')); 如下所示。

if (editMode === true) {
    var divId = element.attr('id'));
    console.log(divId);
}

希望对您有帮助。