删除 jquery 重复答案

【问题标题】：Remove jquery repetition删除 jquery 重复
【发布时间】：2015-07-07 13:47:10
【问题描述】：

我有一个 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>...

如何避免重复？

【问题讨论】：

你能显示渲染的html吗
@Pete 我编辑了我的问题
为什么不对所有元素使用通用类，并使用任何横向方法来定位特定元素或索引？
@BogdanPopa，添加了一个可能有帮助的答案

标签： javascript jquery ruby-on-rails-4 erb

【解决方案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);
    });
});

【讨论】：

你似乎真的更好的方式，这将处理没有 js 用户顺便说一句，当然减去动画

【解决方案2】：

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

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

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

【讨论】：