2017-12-29 1 views
-1

mit einer GLOBAL-Variable - gibt es eine Möglichkeit, dass Sie jQuery eine ID alarmieren können, wenn eine Schaltfläche über schwebt?Verwendung einer globalen Variable - kann jQuery eine "ID" melden, wenn die Schaltfläche über die Maus bewegt wird?

Ich kann es alarmieren, wenn die Variable innerhalb der Funktion eingestellt ist. Aber ich kann es nicht als Alarm auslösen, wenn ich es als globale Variable benutze:

Ich bin neu in der Programmierung, also wäre ein Code-Schnipsel und eine Erklärung toll, um mir zu erklären, wo ich falsch gelaufen bin.

<body> 


    </div> 

    <div id="buttonBar"> 

    <button class="button active" id="html">HTML</button> 

    <button class="button" id="css">CSS</button> 

    <button class="button" id="javascript">JavaScript</button> 

    <button class="button active" id="output">Output</button> 

    </div> 


<script type="text/javascript"> 

    var panelID = $(this).attr("id"); 

    $(".button").hover().alert(panelID); 


</script> 


</body> 

Antwort

2

Ihr Beispielcode ist falsch:

var panelID = $(this).attr("id"); 

Sie beziehen sich auf this verweist auf das Dokument selbst, da für this kein Kontext festgelegt ist.


$(".button").hover().alert(panelID); 

Ihre hover passieren wird, nachdem Sie bereits panelID zu undefined gesetzt. Auch jQuery hat keine Methode .alert() und es sollte als Rückruf von hover() sein, weil es jetzt nichts tut.


Put-Benachrichtigung Callback-Funktion zu schweben und nur dann ID des Elements, die Sie schwebte:

$(document).ready(function() { 
 
    $('.button').mouseenter(function() { 
 
    // "this" now referrs to button you hovered 
 
    var panelID = $(this).attr('id'); 
 
    alert(panelID); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttonBar"> 
 

 
    <button class="button active" id="html">HTML</button> 
 

 
    <button class="button" id="css">CSS</button> 
 

 
    <button class="button" id="javascript">JavaScript</button> 
 

 
    <button class="button active" id="output">Output</button> 
 

 
    </div>


Bitte beachten Sie, dass ich mouseenter statt hover bin mit . Hover-Funktion akzeptiert 1 ~ 2 Parameter für In/Out-Handler, während Mouseenter nur ausgelöst wird, wenn Sie die Maus über Element bewegen.

+0

Das funktioniert perfekt, aber gibt es eine Möglichkeit, dass ich eine globale Variable erstellen kann, die die ID eines Elements, über das ich schwebe, alarmiert. Wenn ich also über einen Knopf schwebe, wird mir die ID angezeigt oder wenn ich über einem Textbereich schwebe, erhalte ich die ID. Im Wesentlichen suche ich eine Variable, die ich auf mehrere Elemente anwenden kann und versuche daher zu vermeiden, für jedes Element eine Variable innerhalb einer Funktion zu erstellen (tut mir leid, wenn ich nicht viel Sinn habe). – Coder

+0

@Coder Ihre Anfrage ist nicht gültig, da der ID-Wert der globalen Variablen nicht geändert wird. Wenn Sie die aktuelle Element-ID alarmieren möchten, müssen Sie diese Eigenschaft erhalten, wenn Sie den Mauszeiger darüber bewegen und nicht davor. – Justinas

+0

Vielen Dank, also ist mein Verständnis, dass Sie die ID nicht aufrufen können, nachdem Sie über das Element und damit schweben das Setzen einer globalen Variable funktioniert nicht, da die Variable vor dem Hover stattfindet? – Coder

0

nein, Sie brauchen es nicht, "das" ist nicht das, was Sie in Ihrem Snippet erwarten.

Ich nehme an, dass Sie wissen wollen, welcher Knopf über war?

dann:

$(".button").on('mouseover', function(e) { alert(e.target.id);}); 
+0

Erklären Sie, warum * ja * – Justinas

+0

@Justinas, sorry, u rechts – 2oppin

+1

'Versuche e.target' als Ereignis gebunden Element unterschiedlich sein kann. Nicht sicher, was OP hier erwartet. Übrigens gibt es in jQuery http: //api.jquery keinen weiteren 'Hover'-Event.com/on/# zusätzliche-notizen –

0

sollten Sie verwenden this Stichwort innerhalb die Hover-Event-Handler hovered Knopfelement zu erhalten:

$('.button').hover(function(){ 
    alert(this.id); 
}); 
+1

Dies würde zweimal ausgelöst werden, auf mouseenter und mouseleave. Ich denke nicht, dass OP es erwartet –

+0

@ A.Wolff, Sie haben Recht. Aber Justinas 'Antwort entfernt alle Fragen;) – Alexander

0

Sie können diese

$(document).ready(function() { 
    $(".button").hover(function() { 
     alert(this.id); 
    }); 
}); 
0
$(document).ready(function(){ 
     $(‘button’).mouseenter(function(e){ 
      alert(e.target.id); 
     }); 
}); 
+0

Während dieses Code-Snippet die Lösung sein kann, hilft eine Erklärung, um die Qualität deines Posts zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in der Zukunft beantworten werden, und diese Leute möglicherweise nicht die Gründe für Ihren Code-Vorschlag kennen –

+0

Ja .. wird das tun –

Verwandte Themen