正しく関数を宣言する場所jQuery

Question

関数を宣言して他の関数に使用したいと思います。この例では、呼び出された関数はアラートを表示しますが、背景色は変更しません。しかし、私が$('.box').click(function() {...の中の関数を宣言すれば、それは正しく動作します。

私は間違っていますか？どのように関数をグローバルに宣言することができますか？

$(document).ready(function() { 
 

 
    function changeColor() { 
 
     $(this).css('background-color','red'); 
 
     alert('Color changed!'); 
 
    } 
 
    
 
    $('.box').click(function() { 
 
    \t changeColor(); 
 
    }) 
 
});

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>

Answer 1

あなたはこのようなchangeColorを呼び出す場合、コンテキストthisは何をしたい、グローバルオブジェクトwindowではないだろう。

簡単な解決策は、パラメータとして関数にパス素子を渡すために、次のようになります。

$(document).ready(function() { 
 

 
    function changeColor(element) { 
 
    $(element).css('background-color', 'red'); 
 
    console.log('Color changed!'); 
 
    } 
 

 
    $('.box').click(function() { 
 
    changeColor(this); 
 
    }) 
 
});

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>

Answer 2

あなたは.boxのオブジェクトを渡す必要があります。あなたが呼び出している関数は、$(this)を使用して.boxのオブジェクトを取得することはありません。そのため、関数上でthisオブジェクトを渡す必要があります。

$(document).ready(function() { 
 

 
    function changeColor(that){ 
 
     $(that).css('background-color','red'); 
 
     alert('Color changed!'); 
 
    } 
 
    
 
    $('.box').click(function() { 
 
    \t changeColor(this); 
 
    }) 
 
});

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>

これはあなたに役立つことを願っています。

Answer 3

clickイベントの外で関数を使用する場合は、パラメータとしてthisを渡す必要があります。

function changeColor($this) { 
     $($this).css('background-color','red'); 
     alert('Color changed!'); 
    } 


    $('.box').click(function() { 
    changeColor(this); 
    }) 

Answer 4

だけで直接イベントハンドラとして関数を渡すか、匿名にする、そうでない場合$(this)がされますウィンドウであり、要素ではない

$(document).ready(function() { 
 

 
    function changeColor() { 
 
    $(this).css('background-color', 'red'); 
 
    alert('Color changed!'); 
 
    } 
 

 
    $('.box').click(changeColor) 
 
});

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>