Question

当我尝试每个HTML元素数组并处理该元素的onclick时，我在Jquery中遇到此错误。

Object.keys(collapsibles).forEach(function (key){
            $(collapsibles[key]).on('click' , function( e ) {
                e.preventDefault();
                const id = $(this).data("id");
                if (id !== _that.currentId) {
                    _that.closeCurrentOpen();
                    $(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
                    $(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
                    return _that.currentId = id;
                } else {
                    return _that.closeCurrentOpen();
                }
            });
        });

该行中出现错误

$(collapsibles[key]).on('click' , function( e ) {

可折叠物的价值

var collapsibles = $('[data-behavior="collapsible"]');

Answer 1

下面的代码产生了错误，因为$(collapsibles[key])不是jQuery对象：

$(collapsibles[key]).on('click' , function( e ) {//...});

请参阅this fiddle。我在其中模拟了您的代码。您可以在控制台中看到collapsibles，看来您不认为它不适合您。

您可以改用以下代码（jsFiddle）：

$.each(collapsibles, function() {
  $(this).on('click', function() {
   // ...
  });
});

Answer 2

嗯，var collapsibles = $('[data-behavior="collapsible"]');不是数组，而是jQuery集合对象。还有you should not iterate array-like objects like that，既没有使用for … in也没有使用Object.keys(…).forEach。

对于jQuery集合，只需使用.each，或者根本不使用它，而直接对其直接调用.on方法，这会将侦听器安装在所有选定元素上。

var collapsibles = $('[data-behavior="collapsible"]');
collapsibles.each(function() {
    $(this).on('click', function(e) {
        e.preventDefault();
        const id = $(this).data("id");
        if (id !== _that.currentId) {
            _that.closeCurrentOpen();
            $(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
            $(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
            return _that.currentId = id;
        } else {
            return _that.closeCurrentOpen();
        }
    });
});

var collapsibles = $('[data-behavior="collapsible"]');
collapsibles.on('click', function(e) {
    e.preventDefault();
    const id = $(this).data("id");
    if (id !== _that.currentId) {
        _that.closeCurrentOpen();
        $(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
        $(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
        return _that.currentId = id;
    } else {
        return _that.closeCurrentOpen();
    }
});

TypeError：在非对象JQUERY上调用了Object.defineProperty

2 个答案: