-2

该代码一直工作到第 48 行，之后不再工作。我想在第 50-62 行的“移动”按钮上实现开关，但这给了我错误 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 行删除该函数，它仍然会给我通常的错误。从某种意义上说，即使该代码已被删除，谷歌浏览器控制台总是会给我该代码的旧错误

4

2 回答 2

0

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

它是表达式的开头（算术运算符：余数 (%)），并且在 之后需要一个操作数%，但在您的代码中，它后面跟着一个}( "margin-top":10% })，这是一个语法错误。

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

至此，它必须是：

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

和（必须有更正的选择effetti器#effetti）

$("#effetti") //sul DIV che si chiama effetti
  .css({
    "background": "red",
    "margin-left": "10%"
  });
于 2019-05-25T07:21:49.277 回答
0

这是我发现的错误

$(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

于 2019-05-25T07:27:16.327 回答