2017-01-08 7 views
3

Guten Morgen Jungs,JS - Uncaught Syntaxerror: unerwartete Token

entschied ich mich starten JavaScript an diesem Wochenende zu lernen und bin jetzt an der ersten Hürde stecken. Ich habe versucht, den Grund für diesen Fehler zu googlen und zu erforschen, und soweit ich sehen kann, ist alles korrekt formatiert. Können Sie helfen? Der Code wurde entwickelt, um einen pfeilförmigen Button, der aus 2 kleinen divs in einem Container besteht, auf meiner Webseite glühen zu lassen, wenn er über die Seite geschoben wird.

$(document).ready(function() { 
var $toggleButton = $('.toggle-button'), 
    $bartop = $('.toggle-button.menu-bar-top'), 
    $barbottom = $('.toggle-button.menu-bar-bottom'), 


$toggleButton.hover(function() { 
    $bartop.css("box-shadow", "0 0 10px 1px #fff"); 
    $barbottom.css("box-shadow", "0 0 10px 1px #fff"); 
}, function() { 
    $bartop.css("box-shadow", "0"); 
    $barbottom.css("box-shadow", "0"); 
}); 
}); 

Ich habe hinzugefügt "box-shadow: 0;" zu den .Toggle-Button .Menu-bar-top und .Toggle-Button .Menu-bar-unten CSS-Klassen, aber ich vermute, dass es etwas mit meinem JS-Code zu tun hat. Ich arbeite in Chrome v55. Jede Hilfe mit diesem würde sehr geschätzt werden!

Antwort

3

Sie haben eine , am Ende der Zeile 4. So ist derFehler aufgrund $toggleButton.hover.

Für Ihren Browser deklarieren Sie immer noch eine neue Variable, aber Sie können . in Variablennamen verwenden.

zu beheben Ihr Problem durch ein ; in Linie die , ersetzen nur 4:

$(document).ready(function() { 
    var $toggleButton = $('.toggle-button'), 
     $bartop = $('.toggle-button.menu-bar-top'), 
     $barbottom = $('.toggle-button.menu-bar-bottom'); 


    $toggleButton.hover(function() { 
    $bartop.css("box-shadow", "0 0 10px 1px #fff"); 
    $barbottom.css("box-shadow", "0 0 10px 1px #fff"); 
    }, function() { 
    $bartop.css("box-shadow", "0"); 
    $barbottom.css("box-shadow", "0"); 
    }); 
}); 
+0

Vielen Dank für die schnelle Antwort! Sie haben Recht, das scheint den Fehler zu stoppen, hat aber nicht die Wirkung auf den Pfeil, auf den ich gehofft hatte. Ich bin mir sicher, das liegt daran, dass ich wahrscheinlich die falschen Selektoren für den gewünschten Effekt anvisiere, aber das wird offiziell beantwortet! Vielen Dank für Ihre Geduld mit einem Newb und die zusätzlichen Details, die Sie für mich hinzugefügt haben –

1

Es Sie Syntaxfehler ist zu geben, wie Sie Komma am Ende in folgende Anweisung

$barbottom = $('.toggle-button.menu-bar-bottom'), 
verwendet haben

Aufgrund des Kommas betrachtet Javascript $toggleButton als Variablendeklaration, da es in der nächsten Zeile steht. Und es ist bereits an der Spitze erklärt, so Javascript wirft Syntaxfehler, dass es bereits deklariert ist. Entfernen Sie das Komma und verwenden Sie das Semikolon ;.

0

Sie haben am Ende Ihrer Variablendeklarationen einige Kommas, die Semikolons sein sollten; und einige fehlende var-Schlüsselwörter am Anfang Ihrer Variablendeklarationen.

var $ bartop = $ ('. Toggle-button.menu-bar-top'); var $ barbottom = $ ('. Toggle-button.menu-bar-bottom');

 $toggleButton.hover(function() { 
      $bartop.css("box-shadow", "0 0 10px 1px #fff"); 
      $barbottom.css("box-shadow", "0 0 10px 1px #fff"); 
     }, function() { 
      $bartop.css("box-shadow", "0"); 
      $barbottom.css("box-shadow", "0"); 
     }); 
}); 
Verwandte Themen