可编辑的内容脚本

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和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>

此