SyntaxError: Unexpected token }

Question

代码一直运行到第 48 行，之后就不再运行了。我想在第 50-62 行的 "move" 按钮上实现开关，但这给了我错误 Error: Uncaught SyntaxError: Unexpected token }

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="1.js"></script>
  <title>Prova Jquery</title>
  <!-- Fogli di stile -->
 <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <body>

  <div class="container" id="effetti">

    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>

   <a href="https://www.google.it/">vai su google</a> 
   <button type="button "id="nascondi-immagine">Nascondi </button> 
   <button type="button" id="mostra-immagine">Mostra </button>   
   <button type="button" id="sposta-immagine">Sposta </button>   


   <p><img src="blu.jpg" \></p>




  </div>

</body>

</html>

文件 1.js :

$(function(){
  $("#effetti")
    .fadeIn(12000);//effetto opacita in 12 secondi 

  $("#effetti")//sul DIV che si chiama effetti
    .on({ //permette di fare qualcosa intercettando un evento (click, mouseover, onclick..)
      mouseover: function(){//creo una function anonima
        console.log("MOUSE OVER");
      }, //sotto scrivo un'altra funzione sempre ANONIMA

      click: function(){//tutte le volte che scrivo "nome-evento" e due punti dentro gli passo un oggetto
        console.log("CLICK"); 

      }

    }); 

  $("#nascondi-immagine")
    .on({
      click:function(){//quando faccio click
        $("img").hide();//devi nascondere l'immagine 
      }
    });

  $("#mostra-immagine")
    .on({
      click:function(){
        $("img").fadeIn(3000);//immagine deve comparire in 3'
      }
    });

  //prEventDefault serve a prevenire il comportamento di default del dom html
  $("#effetti a")//sul DIV che si chiama effetti SELEZIONO gli elementi a
    .on({ //permette di fare qualcosa intercettando un evento (click, mouseover, onclick..)
      click:function(e){//passo un parametro "e" che corrisponde all'elemento "a" in pratica
        e.preventDefault();
      }

    });


  $(window)
    .on("load", function(){
      $("#effetti")
        .css({
          "margin-top":10%
        });
    });

    $(window)//l'oggetto window di js
      .on("load",function(){//scrivo load ed apro un function anonima
        $("#sposta-immagine")
          .on({
            click:function(){//al compimento di questa azione ovvero click su bottone
              $("effetti")//sul DIV che si chiama effetti
                .css({
                  "background":"red",
                  "margin-left":10%
                });
            }
          });
      });

});

当我更新 1.js 文件时，即使我删除了第 50-62 行的函数，它仍然会给我常见的错误。从某种意义上说，google chrome 控制台总是给我该代码的旧错误，即使该代码已被删除

Answer 1

在 JavaScript（以及大多数其他语言）中，10% 并不意味着 10%。

它是一个表达式 (Arithmetic operators: Remainder (%)) 的开头，并期望在 % 之后有一个操作数，但在您的代码中它后面跟着一个 } ("margin-top":10% } ) 这是一个语法错误。

该值必须封装成一个字符串'10%'。

从那时起它必须是：

$("#effetti")
  .css({
    "margin-top": "10%"
  });

and（更正后的选择器 effetti 必须是 #effetti）

$("#effetti") //sul DIV che si chiama effetti
  .css({
    "background": "red",
    "margin-left": "10%"
  });

Answer 2

这是我发现的错误

$(window)//l'oggetto window di js
      .on("load",function(){//scrivo load ed apro un function anonima
        $("#sposta-immagine")
          .on({
            click:function(){//al compimento di questa azione ovvero click su bottone
              $("effetti")//sul DIV che si chiama effetti
                .css({
                  "background":"red",
                  "margin-left":10%
                });
            }
          });
      });

$("effetti") 选择器不正确 $("#effetti")
"background" 我想应该是`"background-color"
10% 应标记为字符串 "10%".
你可以使用单个 $(window).on("load", function() { ... });包装多个代码上下文。只是为了最佳实践。

固定代码如下：

$(function() {

 $("#effetti")
        .fadeIn(12000); //effetto opacita in 12 secondi 

    $("#effetti") //sul DIV che si chiama effetti
        .on({ //permette di fare qualcosa intercettando un evento (click, mouseover, onclick..)
            mouseover: function() { //creo una function anonima
                console.log("MOUSE OVER");
            }, //sotto scrivo un'altra funzione sempre ANONIMA

            click: function() { //tutte le volte che scrivo "nome-evento" e due punti dentro gli passo un oggetto
                console.log("CLICK");

            }

        });

    $("#nascondi-immagine")
        .on({
            click: function() { //quando faccio click
                $("img").hide(); //devi nascondere l'immagine 
            }
        });

    $("#mostra-immagine")
        .on({
            click: function() {
                $("img").fadeIn(3000); //immagine deve comparire in 3'
            }
        });

    //prEventDefault serve a prevenire il comportamento di default del dom html
    $("#effetti a") //sul DIV che si chiama effetti SELEZIONO gli elementi a
        .on({ //permette di fare qualcosa intercettando un evento (click, mouseover, onclick..)
            click: function(e) { //passo un parametro "e" che corrisponde all'elemento "a" in pratica
                e.preventDefault();
            }

        });


    $(window)
        .on("load", function() {
            $("#effetti")
                .css({
                    "margin-top": "10px"
                });


            $("#sposta-immagine").on("click", function() { //al compimento di questa azione ovvero click su bottone
                $("#effetti") //sul DIV che si chiama effetti
                    .css({ "background-color": "red", "margin-left": "10px" });
            });

        });
});

在此处查找工作示例。

https://playcode.io/325382?tabs=console&index.html&output

SyntaxError: Unexpected token }

SyntaxError: Unexpected token }

jquery

unexpected-token