Question

我有一个生成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坐标，但是我如何以清晰和逻辑的方式比较所有链接的坐标并确定最接近的点击？

*我不仅限于使用循环来生成链接，但我希望尽可能简洁。

提前致谢。

Answer 1

看at this example：）

对不起，当我去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)')
                   }
               }
         });
      });

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

Answer 2

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

});

找到最接近的元素，点击并使用javascript设置样式

2 个答案: