我有一个代码，当您单击图像时，它会将一个点与它相关联。我想要的是每次单击时，图像上的关联点都会存储在表格中。如果我在图像上添加 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>
1 回答
慕婉清6462132
TA贡献1804条经验 获得超2个赞
你可以试试下面的代码：
$(document).ready(function () {
let count = 0
let resultArray = []
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(".div1").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 id='point"+count+"'><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) // You could use this array to do something you want
$("#point"+count).on('click', function () {
var output = "ID :"+ $(this).children(":first").text()+" X,Y :"+$(this).children().eq(1).text()+""+$(this).children().eq(2).text()
$("#pointInfo").text(output)
});
}
});
});
.div1 {
width:200px;
height:100px;
background-color:red;
}
tr:hover {
background-color:yellow;
cursor:pointer
}
<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>PointID</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>
<div id="pointInfo"><div>
</body>
添加回答
举报
0/150
提交
取消