1

マウスクリックで div から X/Y 座標を取得しようとしています。

私はすでにこのスクリプトを使用しています：

1 つだけでなく、さらに多くの X/Y 座標を収集したいと考えています。そのため、div を 2 回以上クリックすると、div の下に座標が表示されます。

<div>"click"
"click"</div>
------------------------
coordinates 1: X/Y
coordinates 2: X/Y
.
.
.

誰かが私がそれを行う方法を知っていますか?

4

4 に答える 4

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 は、座標を制限して削除する方法を要求しました。

フィドル: 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(" "));
}
于 2013-03-21T15:10:51.430 に答える
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);
于 2013-03-21T14:44:09.020 に答える
1

要素を使用して行いdivますが、変更できます。フィドル
を見る

私のJSの変更は

 $display.append($('<div />').text('x: ' + x + ', y: ' + y));

そしてHTMLで

<div class='clickable'>
    <div class='display'></div> 
</div>

またはこれ、必要に応じてスクロールバー付き。

于 2013-03-21T14:48:49.360 に答える
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 で配列をツアーできます

于 2013-03-21T15:05:24.963 に答える