Question

早上好，伙计们，

我决定本周末开始学习JavaScript，现在陷入了第一道障碍。我已经尝试使用谷歌搜索/研究这个错误的原因，据我所知，一切都格式正确。你能帮忙吗？该代码旨在制作一个箭头形状的按钮，由容器中的2个小div组成，当我的网页发光时悬停在上面。

$(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");
});
});

我添加了“box-shadow：0;”到.toggle-button .menu-bar-top和.toggle-button .menu-bar-bottom css类，但我怀疑它与我的JS代码有关。我在使用Chrome v55。任何有关这方面的帮助将不胜感激！

Answer 1

第4行末尾有,。Uncaught SyntaxError: Unexpected token .错误归因于$toggleButton.hover。

对于您的浏览器，您仍然在声明一个新变量，但您可以在变量名中使用.。

要解决您的问题，请在第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");
  });
});

Answer 2

它给你语法错误，因为你在下面的语句

中最后使用了逗号

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

由于逗号，javascript正在考虑$toggleButton作为变量声明，因为它在下一行。并且它已经在顶部声明，因此javascript抛出语法错误，它已经被声明。删除逗号并使用分号;。

Answer 3

你的变量声明结尾处有一些逗号，应该是半冒号';'和变量声明开头的一些缺失的var关键字。

$(document).ready(function() {
     var $toggleButton = $('.toggle-button');

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");
      });
});

JS - 未捕获的SyntaxError：意外的令牌

3 个答案: