可编辑的内容脚本

Question

我正在尝试做一些类似于 linkedin 个人资料页面的事情，用户可以在其中即时编辑信息。有没有更好的方法来编写这个脚本？我正在考虑将其用于同一页面上的所有可编辑项目。基本上它到目前为止所做的是隐藏预览字段并显示用户可以编辑信息并保存的表单。

$('.editable-field .edit-info').click(function(){
  $(this).parents().eq(1).find('.view-text').removeClass('show').addClass('hide')
  $(this).parents().eq(1).find('.edit-text').removeClass('hide').addClass('show');
});

$('.cta-btn .cancel').click(function(){
  $(this).parents().eq(1).removeClass('show').addClass('hide');
  $(this).parents().eq(2).find('.view-text').removeClass('hide').addClass('show');
});

$('.cta-btn .save').click(function() {
  //save value here
  $(this).parents().eq(1).removeClass('show').addClass('hide');
  $(this).parents().eq(2).find('.view-text').removeClass('hide').addClass('show');
});

HTML结构

<div class="editable-field">
  <a class="edit-info">Edit</a>
  <div class="view-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    <div class="month">August</div>
  </div>

  <div class="edit-text hide">
    <form class="text-field">
      <textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</textarea>
      <select id="month" name="month"/ >
        <option>Jan</option>       
      </select>

    </form>

    <div class="cta-btn">
      <button class="save">Save Changes</button>
      <button class="cancel">Cancel</button>
    </div>
  </div>  

</div>

Answer 1

您可以使用 .parents('.editable-field'), .siblings and toggle 将其缩短为以下内容。 .toggle() 将隐藏一个可见元素并显示一个隐藏元素。如果这就是您的 show 和 hide 类，我建议您改用它。 -

$('.editable-field .edit-info').click(function() {
  edit($(this));
});

$('.cta-btn .cancel').click(function() {
  edit($(this));
});

$('.cta-btn .save').click(function() {
  //save value here
  $('.view-text p').text($('.edit-text textarea').val());
  edit($(this));
});

function edit($this) {
  $this.parents('.editable-field').find('.view-text').toggle()
    .siblings('.edit-text').toggle();
}

.show {
  display: block;
}
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable-field">
  <a class="edit-info">Edit</a>
  <div class="view-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    <div class="month">August</div>
  </div>

  <div class="edit-text hide">
    <form class="text-field">
      <textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</textarea>
      <select id="month" name="month" />
      <option>Jan</option>
      </select>

    </form>

    <div class="cta-btn">
      <button class="save">Save Changes</button>
      <button class="cancel">Cancel</button>
    </div>
  </div>

</div>

可编辑的内容脚本

Editable content script

jquery

contenteditable