Редактируемый скрипт контента

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>