可編輯的內容腳本

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>

此