Форматирование Jquery Script правильным способом

Question

Есть ли лучший способ форматирования приведенного ниже скрипта? Он выполняет свою работу, но я хотел посмотреть, есть ли способ скомпилировать его в оператор if

Это модуль «Полезна ли эта страница», который я подключаю к своему сайту с помощью менеджера тегов Googleотслеживать клики.

<div class="feedback-headline">
    <p class="feedback-heading">Was this page helpful?</p>
    <button class="feedback-button" id="feedback-yes" type="button">Yes</button>
    <button class="feedback-button" id="feedback-no" type="button">No</button>
</div>

<script>
$(function() {
    $("#feedback-yes").click(function(){
        $(".feedback-button").hide();
        $(".feedback-headline").append("<p style='display:inline- 
        block;'>Thanks for your feedback!</p>");
    });
    $("#feedback-no").click(function(){
        $(".feedback-button").hide();
        $(".feedback-headline").append("<p style='display:inline-block;'>We're 
        sorry to hear that! We'll try to improve on it.</p>");
    });
});
</script>

Answer 1

Я бы использовал делегирование событий для контейнера, и если целью является feedback-yes, добавьте строку да, в противном случае добавьте строку no:

$('.feedback-headline').on('click', '.feedback-button', function(event) {
  $(".feedback-button").hide();
  $(".feedback-headline").append(`<p style='display:inline-block;'>${
    event.target.id === 'feedback-yes'
    ? 'Thanks for your feedback!'
    : "We're sorry to hear that! We'll try to improve on it."
  }</p>`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feedback-headline">
  <p class="feedback-heading">Was this page helpful?</p>
  <button class="feedback-button" id="feedback-yes" type="button">Yes</button>
  <button class="feedback-button" id="feedback-no" type="button">No</button>
</div>