Question

我需要从json文件加载一个数组，并在点击保存后放置上次放置的点，这段代码不起作用，有什么想法吗？基本上，他们可以点击，点会出现，以及下拉菜单中的文字，我想要它，这样他们就可以点击保存，它会将它存储在一个json文件中，下次有人来时，他们可以单击加载，它将循环遍历数组，将点和文本放在它们之前单击的位置。

    <style>
      #map {
      width: 100%;
      height: 1000px;
      margin-top: 50px;
    }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button onclick="load()">LOAD</button>
    <button onclick="save()">SAVE</button>
    <body>
      <select id="myDropdown">
        <option value="shark">Shark</option>
        <option value="kapador">Kapador</option>
      </select>
      <div id="map">

    <script>
      var fishElement
    var points = [""]
    points.length = 20
    var arrayLength = points.length;
    </script>
    <script>
      function load()
        localStorage.getItem('points', JSON.stringify(points));
        for (var i = 0; i < arrayLength; i++) {
          alert(points[i]);
          pageY + 'px'
          pageX + 'px'
          width: '10px'
          height: '10px'
          background:'#000000'
        }
    </script>
    <script>
    function handleClick(x, y) {
      var myFish = $('#myDropdown option:selected').text();
      fishElement = $('#map').append("<p style='position: absolute; top: "+y+"px; left: "+x+"px;'>"+myFish+"</p>");
      return fishElement
    }


    $(document).ready(function() {
      });

      $('#map').click(function(ev) {
        handleClick(ev.pageX, ev.pageY)
        $("body").append(
          $('<div></div>').css({
            position: 'absolute',
            top: ev.pageY + 'px',
            left: ev.pageX + 'px',
            width: '10px',
            height: '10px',
            background: '#000000'
          })
        );
        points.push([ev.pageY, ev.pageX, fishElement])
      });
      function save()
      localStorage.setItem('points', JSON.stringify(points));
    </script>

如何在JavaScript中循环数组时放置点

0 个答案: