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

我会做这样的事情然后你只需要为每个链接提供.animate-scroll

的类

更改链接以将href转换为要滚动到的ID和共享类：

<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

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

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

很少有人参考让你入门

删除jquery重复

2 个答案: