我可以根据jquery中的条件分配功能吗？

Question

我有两个类似的功能，如下所示；

对于最后一个元素函数；

function last () {
    var $this = $(this);

    $this.animate({
        left:'-1200',
        opacity:0
    },500, function(){
        $this
        .addClass('hide')
        .next()
        .removeClass('hide').animate({
            left:'0',
            opacity:1
        },500)
    });
}

对于第一个元素函数；

function first () {
    var $this = $(this);

    $this.animate({
        left:'1200',
        opacity:0
    },500, function(){
        $this
        .addClass('hide')
        .prev()
        .removeClass('hide').animate({
            left:'0',
            opacity:1
        },500)
    });
}

它们很相似，我想将它们组合为一个功能，如下所示；

function steps (pos) { /* -- Dif-1 -- */
    var $this = $(this);

    $this.animate({
        left:pos==='next'&& '-'+'1200', /* -- Dif-2 -- */
        opacity:0
    },500, function(){
        $this
        .addClass('hide')
            pos==='next' ? next() : prev()  /* -- Dif-3 -- */
        .removeClass('hide').animate({
            left:'0',
            opacity:1
        },500)
    });    
}

我想根据pos变量（pos ==='next'？next（）：prev（））确定函数next（）或prev（）。 我怎样才能做到这一点？

Answer 1

您给了这个很棒的机会。 这是我将如何实现您的目标：

function steps (pos) { /* -- Dif-1 -- */
  var $this = $(this);

  $this.animate({
      left:(pos==='next'?-1:1) * 1200, /* -- Dif-2 -- */
      opacity:0
  },500, function(){
      var elt = $this.addClass('hide');
      var elt2 = (pos==='next' ? elt.next() : elt.prev());  /* -- Dif-3 -- */
      elt2.removeClass('hide').animate({
          left:'0',
          opacity:1
      },500);
  });    
}

还有其他方法，ofc。

Answer 2

您的left属性的差异可以使用简单的三元运算符完成：

left: pos==='next' ? -1200 : 1200

如果使用括号表示法来调用prev()或next()则可以继续链接方法：

$this.addClass('hide')
[pos==='next' ? "next" : "prev"]()
.removeClass('hide').animate({

或者，假设pos始终是next或prev ，只需使用[pos]() ：

function steps (pos) {
    var $this = $(this);

    $this.animate({
        left:pos==='next' ? -1200 : 1200,
        opacity:0
    },500, function(){
        $this
        .addClass('hide')[pos]()
        .removeClass('hide').animate({
            left:'0',
            opacity:1
        },500)
    });    
}

Answer 3

尝试下面的代码。在测试之前包括jquery。 当然，您可以优化此代码。 这只是为了显示替代方法。

<html>
<head>
<title>test</title>
<script src="jquery.js"></script>
<script type="text/javascript">
function steps (elem, pos) { /* -- Dif-1 -- */
    var $this = $(elem);

    var obj = $this.animate({
        left: (pos == 'next') ? -1200 : 1200, /* -- Dif-2 -- */
        opacity:0
    },500, function(){
        $this
        .addClass('hide');
    });

    if (pos == 'next')
        obj.next();
    else
        obj.prev();


    obj.removeClass('hide').animate({
        left:'0',
        opacity:1
    },500)

}




</script>
</head>
<body>

<div id="test">Test Div</div>
<script type="text/javascript">
    $(document).ready(function(){
        steps($("#test"), "prev");
    });
</script>
</body>
</html>

我可以根据jquery中的条件分配功能吗？

问题描述

3 个解决方案

解决方案1
3 2014-07-06 09:22:07

解决方案2
1 已采纳 2014-07-06 09:30:17

解决方案3
0 2014-07-06 09:30:46

我可以根据jquery中的条件分配功能吗？

问题描述

3 个解决方案

解决方案1 3 2014-07-06 09:22:07

解决方案2 1 已采纳 2014-07-06 09:30:17

解决方案3 0 2014-07-06 09:30:46

解决方案1
3 2014-07-06 09:22:07

解决方案2
1 已采纳 2014-07-06 09:30:17

解决方案3
0 2014-07-06 09:30:46