Javascript 删除jquery重复

我有jQuery函数，它可以在单击时切换ckeditor文本字段

My.js文件：

$(function() {
  $(".add-greeting").on("click", function(event){
    $(".panel-body").find('#add-greeting').slideToggle(400,
      function(){
        $('html, body').animate({
          scrollTop: $('#add-greeting').offset().top +   $('window').height()
        }, 1000);
      });
      return false;
    });
});

My html.erb文件：

<div class="form-group", style="padding-bottom:0px;">
  <%= link_to "Add greeting", "#", class: "add-greeting btn btn-sm btn-success" %>
</div>

<div id="add-greeting" style="float:left; display:none;">
  <%= f.input :offer_greeting, value: offer_settings(@offer, :offer_greeting), as: :ckeditor %>
</div>

呈现的html：

<div class="form-group", style="padding-bottom:0px;">
  <a class="add-greeting btn btn-sm btn-success" href="#">Add greeting</a>
</div>
<div id="add-greeting" style="float: left; display: none;">
  <div class="control-group ckeditor optional offer_offer_greeting"><label class="ckeditor optional" for="offer_offer_greeting">Greeting</label>...

招呼

---

我怎样才能避免重复

我会这样做，然后您只需要为每个链接指定

类。动画滚动

将链接更改为具有要滚动到的href to id和共享类：

<a class="animate-scroll btn btn-sm btn-success" href="#add-greeting">Add greeting</a>

问题是，我有2个ckeditor字段，所以有2个按钮，现在转换成2个相同的jQuery函数，唯一的区别是我传递的类和ID

$(function() {
  $(".add-observations").on("click", function(event){
    $(".panel-body").find('#add-observations').slideToggle(400,
      function(){
        $('html, body').animate({
          scrollTop: $('#add-observations').offset().top + $('window').height()
        }, 1000);
      });
      return false;
    });
});

在这种情况下，插件可能会有所帮助。尝试将重复代码构建为jQuery插件，并将其与不同的ID或类一起重用

很少有参考资料可以让你开始

---

能否显示呈现的htmlplease@Pete我编辑了我的问题，为什么不为所有元素使用公共类，并使用任何横向方法来针对特定的元素或索引？@BogdanPopa，添加了一个答案，这可能会帮助你找到一个更好的方法，这将处理没有js用户的btw，当然不包括动画

var scrollable = $('html, body');
$(".animate-scroll").on("click", function (event) {
    event.preventDefault();

    var elem = $($(this).attr('href'));

    elem.slideToggle(400,
    function () {
        scrollable.animate({
            scrollTop: elem.offset().top + $(window).height() // no need for quotes around window
        }, 1000);
    });
});