0

200 個のリンクを生成し、ページにランダムに配置するループがあります。ドキュメントクリックイベントで最も近いリンクの色を変えようとしています。したがって、空白をクリックすると、クリックへのクローゼット リンクの色が変わります。リンクを生成する次のコードを使用して、これを達成するにはどうすればよいですか。

var links = "<a  class='links'" ;

for (var i=0; i<200; i++)
{
var randomnumber = Math.floor((Math.random()*1001)+1);
document.write(links+"href='#'"+"style="+'"'+"left:"+randomnumber+'px;"'+"id="+i+">links</a><br>");
}

特定のコード例に加えて、これを概念的に行う方法に関する幅広いアイデアを歓迎します。クリック時に clientX と clientY の座標をキャプチャすることを検討しましたが、すべてのリンクの座標を明確かつ論理的な方法で比較し、クリックから最も近いものを特定するにはどうすればよいでしょうか?

*ループを使用してリンクを生成することに限定されていませんが、可能な限り簡潔にしたいと考えています。

前もって感謝します。

4

2 に答える 2

0

fiddle でサンプル コードを作成しました。ここでjqueryを使用すると、それは単なるベアボーンです。必要に応じて改善してください。これをチェックしてください..

http://jsfiddle.net/ah7ra/2/
http://jsfiddle.net/ah7ra/

$(document).ready(function() {

    var links = "<span style='display: block; cursor: pointer;' class='linkcont'><a  class='links'" ;

for (var i=0; i<200; i++)
{
var randomnumber = Math.floor((Math.random()*1001)+1);
$('#cont').append(links+"href='#'"+"style="+'"'+"left:"+randomnumber+'px;"'+"id="+i+">links</a></span>");
}

    $('.linkcont').on('click', function() {
        var a = $(this).find('a');
        var id = a.attr('id');
        a.css('color', '#f00');
        alert(id);
    }) ;

});
于 2013-06-11T18:27:17.057 に答える