删除 jquery 重复

Question

我有 jQuery 功能，可以在单击时切换 ckeditor 文本字段。

我的 .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;
    });
});

我的 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>

问题是，我有 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;
    });
});

已渲染 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>...

如何避免重复？

Answer 1

我会做这样的事情然后你只需要给每个 link class of .animate-scroll

更改 link 以 href 指向您要滚动到并共享的 ID class:

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

更新 jQuery 为：

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);
    });
});

Answer 2

The problem is, I have 2 ckeditor fields, so 2 buttons, which now translates into 2 identical jQuery functions, the only difference being the classes and ids I am passing in.

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

重复使用它

很少有参考可以帮助您入门

删除 jquery 重复

Remove jquery repetition

javascript

jquery

erb

ruby-on-rails-4