我有一个代码，当您单击图像时，它会将一个点关联到它。
我希望每次单击时，图像上的关联点都存储在表中。
如果我在图像上添加3点，则将这3点存储在表中。因为之后，我希望能够单击这些点以添加信息。
非常感谢您的帮助，对不起我的英语。
这是我的代码js
<script>
$(document).ready(function () {
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(document).click(function (ev) {
if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {
$(".div1").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'blue',
color: 'white',
textAlign: 'center',
})
);
}
});
});
</script>
<body>
<button class="button">Add a point</button>
<div class="div1">
<img src="photo1.jpg" />
</div>
</body>
您可以尝试以下代码：
$(document).ready(function () {
let count = 0
let resultArray = []
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(document).click(function (ev) {
if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {
$(".div1").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'blue',
color: 'white',
textAlign: 'center',
})
);
count = count +1
$("#myTBody").append(
"<tr><td>"+count+"</td><td>"+ev.pageX+"</td><td>"+ev.pageY+"</td></tr>"
)
let point = {
id:count,
x:ev.pageX,
y:ev.pageY
}
resultArray.push(point)
console.log(resultArray)
}
});
});.div1 {
width:200px;
height:200px;
background-color:red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button class="button">Add a point</button>
<div class="div1">
</div>
<table>
<thead id="myTHead">
<tr>
<th>PonintID</th>
<th>PointX</th>
<th>PointY</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>
</body>