javascript - 以正确的方式格式化 Jquery 脚本

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

我会在容器上使用事件委托(delegate)，如果目标是 feedback-yes，则附加 yes-string，否则附加 no-string:

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