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

1

看看这个例子:)

很抱歉，当我去 jsfiddle 时没有看到以前的答案，如果答案不好，我也很抱歉。

 $("div").on('click', function(e) {
       var clkTop = e.pageY - this.offsetTop;
         $("a").each(function() {
               var aTop  = $(this).position().top,
               aLeft = $(this).position().left;

               var d = Math.sqrt((
                  Math.pow(
                      (e.pageX - aLeft), 2) +
                  Math.pow(
                       (e.pageY - aTop), 2) 
               ));

               if (d <= 70 && d >= -70) {
                  $("#putlinktext").text($(this).text());
                   if ($(this).css('color') == 'rgb(255, 0, 0)') {
                          $(this).css('color', 'rgb(0, 255, 255)')
                   } else {
                          $(this).css('color', 'rgb(255, 0, 0)')
                   }
               }
         });
      });

我再次为凌乱的代码感到抱歉。

于 2013-06-11T18:53:46.530 回答
0

我在小提琴中创建了示例代码。在这里使用 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 回答