Question

我正在尝试制作一种循环显示，循环显示一系列值以及在svg文件中移动文本元素。它使用hammer.js库并使用拖动事件。这些值可以向任一方向发展。我有一定程度的工作。当最后一个值从数组中显示时，它会返回到数组的开头以获取第一个值。反之亦然。

var  keyArray = ["C","C#","Db","D","D#","Eb","E","F","F#","Gb","G","G#","Ab","A","A#","Bb","B"];

这是我的阵列。这是我如何将它包装在数组的末尾并返回到开头。

**根据一些评论者的要求和Nina建议的解决方案，我修改了下面的代码以反映他们的建议。为了清楚地了解整体情况，我还添加了一些代码。**

var delta = keyArray.length - 5; // can be constant, it is always positive  

for(i=0;i<5;i++){
  //5 svg text element containing 5 musical keys
  keys = document.getElementById("keys"+i);
  //ev.deltaX is the change received from the hammer pan event
  //text element moves relative to its original starting X
  keys.setAttribute("x",startingSpots[i]+ev.deltaX%150);
  currentX=keys.getAttribute("x");
  currentEdgeIndex=keyArray.indexOf(keys.textContent);    

  //This if is what appears to be failing.  
  if (keys.getAttribute("x")>=565){
    keys.setAttribute("x",currentX-150);
    keys.textContent = keyArray[(currentEdgeIndex + delta) % keyArray.length];
  }  
}

通过建议的更改，我删除了Number（）调用以及实现包装器的模数。这种行为仍然不稳定。在下面的示例中，如果向右平移，当第一个文本元素达到565时，它满足if的条件，向左移动150.

接下来应该做的是将textContent更改为数组中的下一个适当值。但是，这是它变得不稳定的地方，它不再超过565因此它不符合if语句的条件，但是文本在pan事件的每个增量处都会发生变化，就好像它一样。

我确信我没有看到引起麻烦但却不确定它是什么的简单事件。

数组似乎确实正在盘旋，但我仍然不确定“我如何检查if语句是否被正确评估并满足？”

该项目可在此处查看。 http://codepen.io/cmgdesignstudios/pen/zrmQaE?editors=1010

*使用解决方案编辑* 尼娜认为问题在于触摸事件的处理。经过进一步调查，我发现她是对的。我最初一直在相对于其起始位置和触摸事件中的deltaX移动对象。然后，我试图通过简单地将其移回左侧而不是调整起始位置来改变当前位置。

所以我更换了

keys.setAttribute("x",currentX-150);

与

startingSpots[i]-=150;

这使得移动相对于触摸事件的起始位置和deltaX。

Answer 1

请删除不需要的Number(...)广告。 ...length始终返回数字，计算结果也是数字。

您的实际关键功能是向下移动5个条目，这可以通过简单的添加和模数来实现，以将值保持在特定范围内，例如

keys.textContent = keyArray[(keyArray.length + currentEdgeIndex - 5) % keyArray.length];

进一步简化此计算可以导致只添加正数

delta = keyArray.length - 5; // can be constant, it is always positive
keys.textContent = keyArray[(currentEdgeIndex + delta) % keyArray.length];

并使其成为模数。

如何在if语句中检查我的条件以查看它是否正常工作？

1 个答案: