Wo richtig deklarieren Sie eine Funktion jQuery

Question

Ich möchte eine Funktion deklarieren und sie in andere Funktionen verwenden. In diesem Beispiel zeigt die aufgerufene Funktion den Alarm an, ändert jedoch nicht die Hintergrundfarbe. Aber wenn ich die Funktion innerhalb der $('.box').click(function() {... deklariere, dann funktioniert es richtig.

Was mache ich falsch? Wie kann ich eine Funktion global deklarieren?

$(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

Wenn Sie changeColor wie diese dann Kontext nennen thiswindow globales Objekt sein wird, nicht das, was Sie wollen.

einfache Lösung wäre Passelement in der Funktion als Parameter übergeben:

$(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

Sie müssen die Aufgabe der .box passieren. Die Funktion, die Sie aufrufen, wird nicht das Objekt .box mit der $(this) erhalten, deshalb müssen Sie das Objekt this über die Funktion übergeben.

$(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>

Hoffnung Ihnen dies hilfreich sein wird.

Answer 3

Um die Funktion außerhalb des Klickereignisses zu verwenden, sollten Sie this als Parameter übergeben.

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


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

Answer 4

einfach die Funktion als Event-Handler übergeben direkt oder anonym machen, da sonst die $(this) wird die Fenster und nicht das Element

$(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>