javascript - 在js中模拟shuffle

Question

全部，

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

希望demo能做出更好的解释。

代码：

$(".cBBTemplates").on (
{
    hover: function (e)
    {
        var aBBTemplates = document.getElementsByClassName ("cBBTemplates");
        var i = 2;
        while (i < aBBTemplates.length && i >= 0)
        {
            var eCurVar = aBBTemplates[i];
            if (eCurVar === e.target)
            {
                eCurVar.style.zIndex = 3;
            }   else if (eCurVar.style.zIndex === 3)    {
                console.log (eCurVar);
                eCurVar.style.zIndex = 3-1;
            }   else
            {
                eCurVar.style.zIndex = i;
            }
            i--;
        }
    }
});

Answer 1

试试这个：

$(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;
    }
});

});