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

【问题标题】：Can I assign function based on the condition in jquery?我可以根据jquery中的条件分配功能吗？
【发布时间】：2014-08-26 23:24:51
【问题描述】：

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

对于最后一个元素函数；

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() 。我该怎么做？

【问题讨论】：

标签： javascript jquery conditional chaining

【解决方案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。

【讨论】：

【解决方案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)
    });    
}

【讨论】：

【解决方案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>

【讨论】：

next() 和 prev() 返回一个元素，它们不会直接更新 obj 对象。我想你忘了按分配更新obj。
是的，你是对的 .. 我们应该像这样更新 obj 变量 obj = obj.next();