Применить пользовательскую функцию к элементам по классам в Jquery

Question

Вероятно, другой глупый вопрос, но я думал, что это было то, как вы это делаете ...

У меня есть функция, которая включает в себя делает элемент видимым, а затем анимировать его на сцену. Я хотел бы применить это к элементу с классом «.start» для начала, а затем к некоторым другим элементам проекта.

function showthis() { 
    $(this).show().css({ "display": "block" }).animate({ "top": "40px" }, "fast"); 
    console.log('THIS IS: ' + this); 
}; 

$('.start').showthis(); 

ИЛИ

showthis('.start'); 

Если я использую первый способ я получаю сообщение об ошибке сказав "showthis не является функцией. И со вторым способом я просто получаю «ЭТО: [object Window]» в консоли

Довольно уверен, что я делаю ошибку новичка, поэтому вся помощь будет оценена.

Answer 1

Try простирающийся как

(function($){ 
    $.fn.showthis = function() { 
     this.show().animate({ "top": "40px" }, "fast"); 
     return this;//for method chaining - $('.start').showthis().append()... 
    }; 
}(jQuery)); 

Тогда вы должны быть в состоянии назвать как $('.start').showthis(); Обратите внимание, выше $(this) не требуется, поскольку showthis является частью одного и того же объекта, который имеет show(), поэтому this сам будет достаточно.

См How to Create a Basic Plugin

Если вы не хотите расширить, то вам придется исправить showthis с помощью сдавший в селекторе или переходящим в JQuery сам объект

function showthis(selector) { 
    $(selector).show().animate({ "top": "40px" }, "fast"); 
}; 

, а затем вызвать как showthis('.start');

PS: Обратите внимание, .css('display','block') был удален, потому что он такой же, как .show()

Answer 2

function showthis(obj) { 

    $(obj).show().css({ "display" : "block" }).animate({ "top": "40px" }, "fast"); 
    console.log('THIS IS: '+ obj); 

}; 

showthis('.start');