javascript - Draggable.create - 想要在某些数组/端值上显示/隐藏切换

Question

在我从事了很长时间的项目中遇到了障碍。客户希望在他的首页上有一个可旋转的拨号盘，例如安全组合拨号盘或音量旋钮。

旋钮有 4 个端值，对象将吸附到这些端值(最接近的值)。我遇到的问题是，一旦达到相应的值，我不知道如何让 JS 在某个元素上切换隐藏/显示。

例如，在 90 度旋转时，我希望显示元素 X。在 180 度旋转时，我希望元素 X 隐藏，Y 取代它/显示。对 Z 和 A 以 90 度为增量重复。

我当前的代码尝试(在许多代码中)看起来像这样

var dialarray = [0,90,180,270]; 

var rotationSnap = 90;
Draggable.create("#Stage_Group", {
    type:"rotation", //instead of "x,y" or "top,left", we can simply do "rotation" to make the object spinnable! 
    throwProps:true, //enables kinetic-based flicking (continuation of movement, decelerating after releasing the mouse/finger)
    snap:function(endValue) { 
        //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected.
        return Math.round(endValue / rotationSnap) * rotationSnap;

if (rotation("#Stage_Group") = 90) {
    sym.$("brand_awareness").show();
} else {
    sym.$("brand_awareness").hide();
}
}
})

我正在使用 Greensocks，那里缺乏支持让我得到正确的答案，所以在一位更精通代码的 friend (他也没有弄明白)的帮助下，我求助于 StackOverflow。

有人可以指导我找到解决方案吗？这让我发疯，即使这意味着放弃当前代码以获得工作代码也可以，也许我忽略了另一个更合乎逻辑的解决方案来制作具有特定值触发器的可旋转对象？

提前致谢!

Answer 1

这将是您的快照中的代码。更新看到你的评论

var imgRotation = Math.round(endValue / rotationSnap) * rotationSnap;
if (imgRotation == 90) {
   sym.$("id1").show();
} else if (imgRotation == 180) {
   sym.$("id2").show();
} else if (imgRotation == 270 ) {
   sym.$("id3").show();
}
else if ((imgRotation >= 360) || (imgRotation == 0)){
   sym.$("id4").show();
}
return imgRotation;