指向另一个元素的元素答案

【问题标题】：Element to point toward another element指向另一个元素的元素
【发布时间】：2017-03-30 09:47:51
【问题描述】：

我需要在中心创建四个矩形和一个箭头，指向悬停的矩形。见https://jsfiddle.net/Lvmf67rm/1/

$(document).ready(function(){
  $('.quarter:nth-child(1)').mouseenter(function(){
    $('.pointer').css('transform','rotate(-45deg)');
  });
  $('.quarter:nth-child(2)').mouseenter(function(){
    $('.pointer').css('transform','rotate(45deg)');
  });
  $('.quarter:nth-child(3)').mouseenter(function(){
    $('.pointer').css('transform','rotate(-135deg)');
  });
  $('.quarter:nth-child(4)').mouseenter(function(){
    $('.pointer').css('transform','rotate(135deg)');
  });
});

我所做的有两个问题：

如果在矩形 div 之前或中间的某处有一个元素 - 箭头会指向错误的方向（这是因为“nth-child()”会选择子级而不考虑类）
在第 3 和第 4 个矩形之间悬停时，箭头不会直接指向下一个块，而是先穿过第一个和第二个块（很明显为什么会发生这种情况）。

但是如何使它正确呢？我是 javascript 的菜鸟，所以这是我能做的最好的，我请求你的指导。

附：对不起，如果我没有很好地解释它，英语不是我的母语。

附言抱歉，我忘了说我不能编辑 HTML。

【问题讨论】：

如果要防止箭头指向错误的方向，请将 div 移到容器元素之外... 至于像这样旋转的箭头，那是因为您没有检查当前位置知道例如... nth-child(3) 是否应该设置为 rotate(-135deg) 或 rotate(225deg)。也许您应该想办法检查当前位置，并根据检查结果使用它来设置旋转度数...
如果你决定试试这个方法，也许这会有一些用处css-tricks.com/get-value-of-css-rotation-through-javascript
这不是 100%，因为读数对我来说似乎不正确，但它是您的起点jsfiddle.net/Lvmf67rm/2 感谢这个答案，用于检查旋转度数stackoverflow.com/questions/13592384/…如果您使用该功能并发现它有用，请投票支持该答案以显示信誉。 一定要打开浏览器控制台查看度数输出

标签： javascript jquery

【解决方案1】：

关于在矩形 div 之前或中间添加元素，这里有一些可能的解决方案：

最佳选择：不要这样做。在容器外添加其他元素，并使用 CSS 定位来定位。
使用:nth-of-type 代替:nth-child
使用类 q1、q2...

:nth-child

关于箭头方向：看看在 q4 中使用 -225deg 如何改变行为：

  $('.quarter:nth-child(4)').mouseenter(function(){
      console.log($('.pointer').css('transform'));  // get prev value
      $('.pointer').css('transform','rotate(-225deg)'); // instead of 135deg
  });

您可以检查先前的值以动态更改度数，选择 2 个候选者中的最佳选项（其中先前度数的绝对值 - 新度数最小，增加或减少 360 度）。

【讨论】：