Блог

У меня есть эти два события щелчка для двух разных классов, у них есть одна часть кода, которая одинакова для них обоих, поэтому я попытался создать функцию, которая содержала бы ту часть кода, которая одинакова, а затем cal, эту функцию внутри onclick, но я продолжаю получатьодна ошибка.

Это код, который работает правильно:

 $(list).on('click', function() {

    $(arrow).removeClass("mobile-select__arrow--active")
    $(listItem).removeClass(listItem_expanded);
    $(list).addClass("mobile-select--sticky");
    var windowHeight = $(window).height();
    var documentHeight = $(document).height();
    var target = $(this.getAttribute('href'));
    if (target.length) {
      //prevent default bhebahvior
      event.preventDefault();
      var topDistance = target.offset().top;
      var bottomDistance = documentHeight - topDistance;
      if (windowHeight > bottomDistance) {
        $(container).css('padding-bottom', topDistance   'px');
      };
      var stickyTopHeight = $(list).outerHeight();
      $('html, body').stop().animate({
        scrollTop: target.offset().top - stickyTopHeight - 150
      }, 1000);
  
        if($(window).width() <= 769) {
            $('html, body').stop().animate({
                scrollTop: target.offset().top - stickyTopHeight - 100
            }, 1000);
        }
    }
    if($(window).width() <= 769) {
        if (!$(this).hasClass(list_expanded)) {
            $(this).addClass(list_expanded);
            $(arrow).addClass("mobile-select__arrow--active")
            $(listItem).addClass(listItem_expanded);

        } else {
            $(this).removeClass(list_expanded);
            // $(this).slideUp();
            $(arrow).removeClass("mobile-select__arrow--active")
            $(listItem).removeClass(listItem_expanded);
        }
    }
    if ($(window).width() > 769) {
        $(this).addClass(list_expanded);
        $(arrow).addClass("mobile-select__arrow--active")
        $(listItem).addClass(listItem_expanded);
    }
    
});

$(link).on('click', function() {

    $(arrow).removeClass("mobile-select__arrow--active")
    $(listItem).removeClass(listItem_expanded);
    $(list).addClass("mobile-select--sticky");
    var windowHeight = $(window).height(); 
    var documentHeight = $(document).height();
    var target = $(this.getAttribute('href'));
    if (target.length) {
        //prevent default bhebahvior
        event.preventDefault();
        var topDistance = target.offset().top;
        var bottomDistance = documentHeight - topDistance;
        if (windowHeight > bottomDistance) {
            $(container).css('padding-bottom', topDistance   'px');
        }
        var stickyTopHeight = $(list).outerHeight();
        $('html, body').stop().animate({
            scrollTop: target.offset().top - stickyTopHeight - 150
        }, 1000);
        if($(window).width() <= 769) {
            $('html, body').stop().animate({
                scrollTop: target.offset().top - stickyTopHeight - 100
            }, 1000);
        }
    }
});
  

И это то, что я пытался сделать, но безуспешно, поскольку я получал эти ошибки: Неперехваченный TypeError: target.attr не является функцией Неперехваченный TypeError: не удается прочитать свойство ‘length’ неопределенного

 function doSomething(target) {
target = target || $(this);
$(arrow).removeClass("mobile-select__arrow--active")
$(listItem).removeClass(listItem_expanded);
$(list).addClass("mobile-select--sticky");
var windowHeight = $(window).height();
var documentHeight = $(document).height();
if (target.attr('href').length) {
    //prevent default bhebahvior
    event.preventDefault();
    var topDistance = target.offset().top;
    var bottomDistance = documentHeight - topDistance;
    if (windowHeight > bottomDistance) {
        $(container).css('padding-bottom', topDistance   'px');
    };
    var stickyTopHeight = $(list).outerHeight();
    $('html, body').stop().animate({
        scrollTop: target.offset().top - stickyTopHeight - 150
    }, 1000);
    
    if($(window).width() <= 769) {
        $('html, body').stop().animate({
            scrollTop: target.offset().top - stickyTopHeight - 100
        }, 1000);
    }
}
  

}

$(list).on(‘click’, function() { doSomething($(this));

 if($(window).width() <= 769) {
    if (!$(this).hasClass(list_expanded)) {
        $(this).addClass(list_expanded);
        $(arrow).addClass("mobile-select__arrow--active")
        $(listItem).addClass(listItem_expanded);
        
    } else {
        $(this).removeClass(list_expanded);
        // $(this).slideUp();
        $(arrow).removeClass("mobile-select__arrow--active")
        $(listItem).removeClass(listItem_expanded);
    }
}
if ($(window).width() > 769) {
    $(this).addClass(list_expanded);
    $(arrow).addClass("mobile-select__arrow--active")
    $(listItem).addClass(listItem_expanded);
}
  

});

$(link).on(‘click’, doSomething);

Я просто хотел попробовать записать эти события более коротким способом. Возможно ли это?

Вероятно, это тот, который терпит неудачу:

 $(link).on('click', doSomething);
  

doSomething Функция ожидает, что ее единственным аргументом будет объект jQuery для элемента DOM, но click событие передает объект события, а не элемент, который вызвал событие. Вы можете передать элемент как объект jQuery так же, как и в другом вашем click обработчике:

 $(link).on('click', function () { doSomething($(this)); });