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

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

我做错了什么？

主要有四件事：

1. 你不是把位置放在一个数组中，你只是得到它们，然后把它们扔掉：

   var pos = $('#image0').position();
   pos.top;
   pos.left;
   

2. 稍后的语法var positions = ["1", "2", "3"];确实是直接创建数组的正确方法，但该数组只包含字符串"1"、"2"和"3"，与之前的pos(或pos1等(变量无关。

   您可以将该语法与获取位置相结合，如下所示：

   var positions = [
   $('#image0').position(),
   $('#image1').position(),
   $('#image2').position(),
   $('#image3').position()
   ];
   

   然而，您可能更适合动态地执行，但要在#dvSource元素中找到img元素：

   var positions = $("#dvSource img").map(function() {
   return $(this).position();
   }).get();
   

   它使用map来获得包含位置对象的jQuery对象，并使用get来获得它的实际数组

3. 您不需要在每次使用变量之前使用var，因此这行代码是一个语法错误：

   document.getElementById("coordinatesjs").value = var positions;
   // Here -----------------------------------------^
   

   只需移除var即可。但请参见#4。

4. 将对象数组分配给input的value属性时，将不会得到任何有用的东西，只有"[object Object],[object Object],[object Object]"。您需要以某种方式格式化这些值。下面是一个将它们格式化为有效JSON(用于数据交换的文本表示法(的示例：

   document.getElementById("coordinatesjs").value = JSON.stringify(positions);
   

Answer 2

1. = var positions不是有效的JS
2. <br/>而非</br>
3. 你实际上没有在任何地方存放任何东西

以下是一些实际执行的代码

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>