0

全て、

ユーザーがシャッフルできる 3 枚のカードがあります。ホバーすると、ターゲット カードが一番上にポップし、一番上の最後のカードが 2 番目の位置に置かれます。以下のコードでは、一方向 (左から右) でこの効果を得ることができますが、js で複数のシナリオを記述する必要なく、両方向で効果を機能させるためのロジックとコードを考え出すのに苦労しています (これはありません)。非常に優れたロジックのように聞こえます)。

うまくいけば、デモはより良い説明をします。

コード：

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

1 に答える 1

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

});

于 2012-11-21T12:38:10.380 に答える