Question

所有

我有三张可由用户洗牌的牌，在悬停时，目标牌弹出顶部，顶部的最后一张牌应位于第二位置。虽然使用下面的代码，我可以在一个方向（从左到右）产生这种效果，我正在努力想出逻辑＆amp;用于使效果在两个方向上工作而不必在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;
    }
});

}）;

在js中模拟shuffle

1 个答案: