我试图通过鼠标点击从div中获取X / Y坐标。
现在我想收集更多的X / Y坐标,而不只是一个。 所以,如果我在div中单击两次或更多次,我想列出div下的坐标。
<div>"click"
"click"</div>
------------------------
coordinates 1: X/Y
coordinates 2: X/Y
.
.
.
有谁知道我是怎么做到的?
答案 0 :(得分:2)
在现有元素之后添加新元素<div id="log"></div>
。
在您的JavaScript代码中添加
document.getElementById("log").innerHTML += "<br/>Coordinates: X=" + x + "; Y=" + y;
在你的jsfiddle例子中:
$display.html($display.html() + '<br/> x: ' + x + ', y: ' + y);
答案 1 :(得分:2)
这正是你所要求的。
小提琴:http://jsfiddle.net/ZZEk8/118/
添加到HTML:
<span class="log"></span>
JS:
var clicks = [],
updatedClicks = "";
$('.clickable').on('click', function (ev) { //We don't use .bind() after jQuery 1.7, use .on() now.
var $div = $(ev.target);
var $display = $div.find('.display');
var offset = $div.offset();
var x = ev.clientX - offset.left;
var y = ev.clientY - offset.top;
$display.text('x: ' + x + ', y: ' + y);
clicks.push(x + "/" + y);
updatedClicks += "coordinates" + " " + clicks.length + ":" + " " + clicks[clicks.length -1] + "<br />";
$('.log').html(updatedClicks);
});
<强>更新强> OP要求一种方法来限制coords并删除一个。
小提琴:http://jsfiddle.net/ZZEk8/125/
var clicks = [],
updatedClicks = [],
limit = 5;
$('.clickable').on('click', function (ev) {
var $div = $(ev.target);
var $display = $div.find('.display');
var offset = $div.offset();
var x = ev.clientX - offset.left;
var y = ev.clientY - offset.top;
$display.text('x: ' + x + ', y: ' + y);
//Stops adding at limit
if (clicks.length < limit){
addCoord(x,y);
}
});
$('.delete').on('change', function(ev) {
if(clicks.length){
var selection = this.value -1;
deleteCoord(selection);
} else { //If there are no coords to delete run this
return false;
}
});
function addCoord (x,y){
clicks.push(x + "/" + y);
updatedClicks.push("Coordinates" + ":" + " " + clicks[clicks.length -1] + "<br />");
$('.log').html(updatedClicks.join(" "));
}
function deleteCoord(selection) {
clicks.splice(selection, 1);
updatedClicks.splice(selection, 1);
$('.log').html(updatedClicks.join(" "));
}
答案 2 :(得分:1)
我使用div
元素执行此操作,但您可以更改它。
我的JS改变是
$display.append($('<div />').text('x: ' + x + ', y: ' + y));
以HTML格式
<div class='clickable'>
<div class='display'></div>
</div>
或this one,需要时使用滚动条。
答案 3 :(得分:1)
如果要保存坐标,可以在数组中收集它们,如下所示:
//Declare an array with 0 length
var arr = new Array(0);
$('.clickable').bind('click', function (ev) {
var $div = $(ev.target);
var $display = $div.find('.display');
var offset = $div.offset();
var x = ev.clientX - offset.left;
var y = ev.clientY - offset.top;
$display.text('x: ' + x + ', y: ' + y);
//increase the length of array before insert the value of coords
arr.length = arr.length+1;
//insert the value
arr[arr.length-1] = "coordinates" + arr.length + ":" + x +"/" + y;
});
然后,要操作坐标,您可以使用for-loop
浏览数组