jqueryで関数を実行する方法
私はプログラミング初心者です。関数をJQueryに保存し、複数の場所で実行する方法がわかりません。
私は持っています:
$(function () {
$("div.class").click(function(){
//Doo something
});
$("div.secondclass").click(function(){
//Doo something
});
});
これで、2つの「// Doo somethings」は同じになり、同じコードを再度記述したくありません。
私が入れた場合:
$(function () {
function doosomething ()
{
//Doo something
}
$("div.class").click(doosomething);
$("div.secondclass").click(doosomething);
});
これは、クリックしたときだけでなく、ページの読み込み時に関数を実行します。
これを正しく行うにはどうすればよいですか?
ありがとう!
以下はうまく動作するはずです。
$(function() {
// Way 1
function doosomething()
{
//Doo something
}
// Way 2, equivalent to Way 1
var doosomething = function() {
// Doo something
}
$("div.class").click(doosomething);
$("div.secondclass").click(doosomething);
});
基本的に、関数を使用しているのと同じスコープで関数を宣言します(JavaScriptは Closures を使用してスコープを決定します)。
JavaScriptの関数は他のオブジェクトと同じように動作するため、.click(doosomething);
を使用して、クリック時に呼び出す関数としてdoosomething
を割り当てることができます。
関数は、doosomething()
(()
なしのdoosomething
を使用して呼び出すか、関数を参照します)または別の関数を呼び出す(この場合、 click
ハンドラー)。
私はこのようにします:
(function($) {
jQuery.fn.doSomething = function() {
return this.each(function() {
var $this = $(this);
$this.click(function(event) {
event.preventDefault();
// Your function goes here
});
});
};
})(jQuery);
次に、ドキュメントの準備ができたら、次のようなことができます:
$(document).ready(function() {
$('#div1').doSomething();
$('#div2').doSomething();
});
function doosomething ()
{
//Doo something
}
$(function () {
$("div.class").click(doosomething);
$("div.secondclass").click(doosomething);
});
別の方法として(できれば)、次のようにすることもできます。
$(function () {
$("div.class, div.secondclass").click(function(){
//Doo something
});
});
これを行うこともできます-1つの関数をどこでも使用したいので、JqueryObject.function()を直接呼び出すことで使用できます。たとえば、独自の関数を作成して要素のCSSを操作する場合:
jQuery.fn.doSomething = function () {
this.css("position","absolute");
return this;
}
そしてそれを呼び出す方法:
$("#someRandomDiv").doSomething();
これは最も難読化されたソリューションですか? jQueryのアイデアはこのようなコードを作成することではなかったと考えています。
doosomething()
の外に$(function(){}
を単純に移動すると、グローバルスコープが設定され、コードが単純/読みやすくなります。