Javascript 在js中模拟shuffle

全部,

我有三张牌，用户可以洗牌，悬停时，目标牌弹出顶部，顶部的最后一张牌应位于第二个位置。虽然有了下面的代码，我可以在一个方向（从左到右）产生这种效果，但我很难想出逻辑和代码来让这种效果在两个方向上都起作用，而不必在js中编写多个场景（听起来不是很好的逻辑）

希望这本书能做出更好的解释

代码：

$（“.cBBTemplates”）。在(
{
悬停：函数（e）
{
var aBBTemplates=document.getElementsByClassName（“cBBTemplates”）；
var i=2；
而（i=0）
{
var-eCurVar=abb[i]；
if（eCurVar==e.target）
{
eCurVar.style.zIndex=3；
}else if（eCurVar.style.zIndex==3）{
console.log（eCurVar）；
eCurVar.style.zIndex=3-1；
}否则
{
eCurVar.style.zIndex=i；
}
我--；
}
}
});

试试这个：

$(function(){
    var current = 2;
   $(".cBBTemplates").on (
{
    hover: function ()
    {
      var target = this,
      newCurrent, templates = $(".cBBTemplates");

      templates.each(
        function(idx){
           if(this === target){
             newCurrent = idx;
           }
       });

  if(newCurrent === current){return;}


      templates.each(function(index){
          var zIndex = 0;
        if(this === target) {
          zIndex = 2;
        }
        else if (index == current) {
          zIndex = 1; 
        }

        $(this).css('zIndex', zIndex);

      });

      current = newCurrent;
    }
});

---

}))

假设1，2和3的骰子。您的逻辑可以在一个变量中保留指向前面卡的指针。悬停时，您将目标zindex更改为3，并从其他牌的zindex中删除1，直到（两张牌的）两个值都小于3。但是，感谢您，代码中存在一个缺陷，当您从右向左悬停时，在最左边的牌上，鼠标悬停时，第三张牌位于第二张牌的顶部。我不太清楚你的意思。您要求“悬停时，目标卡会弹出到顶部，顶部的最后一张卡应该位于第二个位置”，这是此代码实际执行的操作。它不是。在演示中试一试，将光标从最右边的牌悬停到最左边，直到您将光标移离最后一张牌为止，一切看起来都很好。试一试。删除了同一张卡上的双重触发。

$(function(){
    var current = 2;
   $(".cBBTemplates").on (
{
    hover: function ()
    {
      var target = this,
      newCurrent, templates = $(".cBBTemplates");

      templates.each(
        function(idx){
           if(this === target){
             newCurrent = idx;
           }
       });

  if(newCurrent === current){return;}


      templates.each(function(index){
          var zIndex = 0;
        if(this === target) {
          zIndex = 2;
        }
        else if (index == current) {
          zIndex = 1; 
        }

        $(this).css('zIndex', zIndex);

      });

      current = newCurrent;
    }
});