Question

美好的一天，

我有一段代码旨在对鼠标点击执行操作。首先，当我对另一个元素执行单击时，我创建了一个在元素上滚动屏幕的函数：

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');

    }
})(jQuery);

比将此函数分配给特定的DOM元素：

$('#collapse1').on('shown.bs.collapse', function () {
     $('#s1').goTo();  
});

$('#collapse2').on('shown.bs.collapse', function () {
     $('#s2').goTo();  
});

$('#collapse3').on('shown.bs.collapse', function () {
     $('#s3').goTo();  
});

$('#collapse4').on('shown.bs.collapse', function () {
     $('#s4').goTo();  
});
etc...

“shown.bs.collapse”实际上是来自bootstrap collapse.js。 “当一个崩溃元素对用户可见时（将等待CSS转换完成），将触发此事件。” 代码正在运行，但它看起来并不好看。有没有办法做出某种循环？标准“for”不起作用：

var collapseNumber = jQuery.makeArray(document.getElementsByClassName("panel panel-default"));

for (var i = 0; i < collapseNumber.length; i++) {

  $('#collapse' + i).on('shown.bs.collapse', function () {
     $('#s' + i).goTo();  
   });
}

创建的数组用于获取元素的实际数量，我需要将其放入循环中。

Answer 1

您遇到的问题是infamous for loop issue，其中i的值是最后一个值。但是，当可以使用简单的数据属性时，没有理由必须循环。

只需使用数据属性来选择和链接事物

<div data-goto="#s1">...</div>

和JavaScript

$('[data-goto]').on('shown.bs.collapse', function () {
    var selector = $(this).data("goto");
    $(selector).goTo();  
});

Javascript：自动化功能

1 个答案: