SyntaxError:意外令牌}

时间:2019-05-25 07:05:44

标签: jquery unexpected-token

该代码一直运行到第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行删除了该函数,它仍然会给我通常的错误。从某种意义上说,即使该代码已被删除,谷歌浏览器控制台也总是给我该代码的旧错误

2 个答案:

答案 0 :(得分:1)

这是我发现的错误

$(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. $("effetti")选择器不正确$("#effetti")

  2. "background"我认为应该是““背景色”

  3. 10%应标记为字符串"10%"

  4. 您可以使用单个$(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

答案 1 :(得分:0)

在JavaScript(和大多数其他语言)中,10%并不意味着10%。

它是表达式(Arithmetic operators: Remainder (%))的开头,并且期望操作数在%之后,但是在您的代码中,其后是}"margin-top":10% })和这是语法错误。

该值必须封装在字符串'10%'中。

从那以后它必须是:

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

并且(使用正确的选择器effetti必须为#effetti

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