我可以根据jquery中的条件分配函数吗？

I have two similar function as below;

我有两个类似的功能如下;

For last element function;

对于最后的元素函数;

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

For first element function;

对于第一元素函数;

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

they are similar and I want to combine them as one function, as below;

它们是相似的，我想将它们组合成一个函数，如下所示;

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

I want to determine function next() or prev() according to pos variable (pos==='next' ? next() : prev() ). How can I do this?

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

3 个解决方案

#1

The difference in your left property can be done using a simple ternary operator:

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

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

And you can continue chaining your methods if you use bracket notation to call prev() or next():

如果使用括号表示法调用prev（）或next（），则可以继续链接方法：

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

Or, assuming pos will always be either next or prev, simply use [pos]():

或者，假设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)
    });    
}

#2

You gave this a great shot. Here is how I would achieve your goal:

你给了这个很棒的镜头。以下是我实现目标的方法：

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

There are other ways, ofc.

还有其他方法，ofc。

#3

Try following code.. Include jquery before testing. Ofcourse you can optimize this code . .this is just to show the alternate approach..

尝试以下代码..在测试之前包括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>

#1