Question

我正在尝试做类似于linkedin个人资料页面的内容，用户可以立即编辑信息。有没有更好的方法来编写这个脚本？我想将它用于同一页面上的所有可编辑项目。基本上它到目前为止所做的是隐藏预览字段＆amp;显示用户可以编辑信息的表格。保存它。

$('.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和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>

可编辑的内容脚本

1 个答案: