Question

我有这些图片：

  <div id="dvSource">
    <img id="image0" img alt="image0" src="upload/<?php echo $user_id; ?>/0" />
    <img id="image1" img alt="image1" src="upload/<?php echo $user_id; ?>/1" />
    </br>
    <img id="image2" img alt="image2" src="upload/<?php echo $user_id; ?>/2" />
    <img id="image3" img alt="image3" src="upload/<?php echo $user_id; ?>/3" />
</div>

，并且可以使用我拥有的一些JavaScript将它们移到其他div中。我正在尝试将它们的坐标存储在数组中，但是它不起作用，这就是我得到的：

var pos = $('#image0').position();
pos.top;
pos.left;
var pos1 = $('#image1').position();
pos.top;
pos.left;
var pos2 = $('#image2').position();
pos.top; 
pos.left; 
var pos3 = $('#image3').position();
pos.top;  
pos.left; 

var positions = ["1", "2", "3"];
document.getElementById("coordinatesjs").value = var positions;

我在做什么错了？

Answer 1

我在做什么错了？

主要有四件事：

您没有将位置放置在数组中，只是获取它们，然后将它们扔掉：
```
var pos = $('#image0').position();
pos.top;
pos.left;
```
稍后的语法var positions = ["1", "2", "3"];确实是直接创建数组的正确方法，但是该数组仅包含字符串"1"，"2"和{{1 }}，与之前的"3"（或pos等变量）无关。

您可以将语法与获取位置结合起来，如下所示：
```
pos1
```
不过，最好动态地进行操作，但最好在var positions = [ $('#image0').position(), $('#image1').position(), $('#image2').position(), $('#image3').position() ];元素中找到img元素：
```
#dvSource
```
它使用map获取包含位置对象的jQuery对象，并使用get获取其真实数组。
您不必在每次使用变量之前都使用var positions = $("#dvSource img").map(function() { return $(this).position(); }).get();，因此此行代码是语法错误：
```
var
```
只需删除该document.getElementById("coordinatesjs").value = var positions; // Here -----------------------------------------^。但是请参阅＃4。
当您将对象数组分配给var的{{1}}属性时，将不会得到任何有用的信息，仅仅是value。您需要以某种方式设置这些值的格式。这是一个将其格式化为有效JSON（用于数据交换的文本符号）的示例：
```
input
```

Answer 2

= var positions无效的JS
<br/>不是</br>
您实际上没有在任何地方存储任何东西

这是一些实际上可以执行某些操作的代码

var positions = [];
$(".img").each(function() {
  positions.push($(this).position()); // or push({ "top":position.top,"left":position.left});
})  
$("#coordinatesjs").html(
  JSON.stringify(positions) // convert to string
  .replace(/},/g,"}<br/>")  // replace }, with <br/>
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvSource">
    <img id="image0" class="img" alt="image0" src="https://via.placeholder.com/350x150&text=0" />
    <img id="image1" class="img" alt="image1" src="https://via.placeholder.com/350x150&text=0" />
    <br />
    <img id="image2" class="img" alt="image2" src="https://via.placeholder.com/350x150&text=0" />
    <img id="image3" class="img" alt="image3" src="https://via.placeholder.com/350x150&text=0" />
</div>

<div id="coordinatesjs"></div>

为什么不能将这些坐标存储在JS数组中？

2 个答案: