Javascript：意外的令牌[第92行

Question

I am having trouble with my html page here. 我在这里遇到我的html页面的麻烦。 On the console it shows me that there is 1 error on line 92 due to an unexpected token. 在控制台上，它显示出由于意外令牌，第92行出现1个错误。 Im trying to drag the image on the page to a designated box. 我试图将页面上的图像拖到指定的框中。 Once dragged it should stay in the box. 一旦拖动它应该留在盒子里。 When I click on the image i should be able to drag it out of the box. 当我点击图像时，我应该可以将其拖出框。 I am not sure where i went wrong, but its completely not working at this point. 我不确定我哪里出错了，但它在这一点上完全不起作用。 All help is appreciated. 所有帮助表示赞赏。

 $(document).ready(function() { var pictureIds = 20; var Size = 400; var table = $('#results').DataTable(); $.get("https://unsplash.it/list", function(Res) { for (var i = 0; i < pictureIds; pictureIds++) { var randomNumber = Math.floor(Math.random() * pictureIds.length) $('.left').append($("<img>", { src: "https://picsum.photos/" + Size + "/" + Size + "?image" + Res[randomNumber].id, id: randomNumber, class: "leftImg" })); } (".leftImg").draggable({ revert: "invalid" }); $("#right").droppable({ accept: ".leftImg", drop: function(event, ui) { ui.draggable.attr("id"), $(ui.draggable).detach().css({ top: 2, left: 0 }).appendTo($(this)); window.alert("Dropped image with an ID of " + ui.draggable.attr('id')); //Create rows var rowNode = table.row.add({ Res[image id].id, Res[image id].filename, Res[image id].author, Res[image id].post_url }).draw() .node(); table.row.add({ Res[image id].id, Res[image id].filename, Res[image id].author, Res[image id].post_url }).draw(); $(rowNode).addClass(ui.draggable.attr('id')); } }) }); });

 .left { padding: 20px; order: solid #000000 2px; height: 50%; width: 90%; } #right { width: 30%; border: solid #000000 2px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: right; min-height: 400px; }

 <html> <head> <!-- head stuff goes here --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" /> </head> <body> <!-- HTML content goes here --> <div class="left"> <img class="leftImg" src="https://source.unsplash.com/random/200x200" id="102" /> <div id="right"> </div> </div> <table id="results" style="width:100%"> <thead> <tr> <th>id</th> <th>filename</th> <th>author</th> <th>url</th> </tr> </thead> <tbody> </tbody> </table> </html>

Answer 1

I think you just got a little overzealous with some editing... A few typo's and I think you're good: 我认为您对编辑有些狂热...一些错字，我认为您很好：

Missing the $ on the line " (".leftImg").draggable({" 在行（（“ .leftImg”）。draggable（{“
The line var randomNumber = Math.floor(Math.random() * pictureIds.length) needs to have pictureIds.length changed to pictureIds as it is an int not an array. 行var randomNumber = Math.floor（Math.random（）* pictureIds.length）需要将pictureIds.length更改为pictureIds，因为它是一个int而不是数组。
Your loop is on the variable i but you incremented pictureId's instead of i. 你的循环在变量i上但你增加了pictureId而不是i。
The part where you are doing table.row.add had Res[image id] and I am not sure what is supposed to be in place if image id but Res[image id] is not valid. 您正在执行table.row.add的部分具有Res [图像ID]，如果图像ID但Res [图像ID]无效，我不确定应该放置什么。 I commented that out in the code below but what I have edited below is draggable into the box. 我在下面的代码中对此进行了注释，但是我在下面的编辑内容可拖动到框中。

$(document).ready(function() {

  var pictureIds = 20;
  var Size = 400;
  var table = $('#results').DataTable();

  $.get("https://unsplash.it/list", function(Res) {
    for (var i = 0; i < pictureIds; i++) {
      var randomNumber = Math.floor(Math.random() * pictureIds);

      $('.left').append($("<img>", {
        src: "https://picsum.photos/" + Size + "/" + Size + "?image" + Res[randomNumber].id,
        id: randomNumber,
        class: "leftImg"
      }));

    }

    $(".leftImg").draggable({
      revert: "invalid"
    });

    $("#right").droppable({
      accept: ".leftImg",
      drop: function(event, ui) {
        ui.draggable.attr("id"),
          $(ui.draggable).detach().css({
            top: 2,
            left: 0
          }).appendTo($(this));
        window.alert("Dropped image with an ID of " + ui.draggable.attr('id'));

        //Create rows
        /*
        var rowNode = table.row.add({
            Res[randomNumber].id,
            Res[randomNumber].filename,
            Res[randomNumber].author,
            Res[randomNumber].post_url
          }).draw()
          .node();

        table.row.add({
          Res[randomNumber].id,
          Res[randomNumber].filename,
          Res[randomNumber].author,
          Res[randomNumber].post_url
        }).draw();
        */
        $(rowNode).addClass(ui.draggable.attr('id'));

      }

    })

  });
});

Javascript：意外的令牌[第92行

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-03-19 04:13:27

Javascript：意外的令牌[第92行

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-03-19 04:13:27

解决方案1
0 已采纳 2019-03-19 04:13:27