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变量确定函数next（）或prev（）（pos ===＆＃39; next＆＃39;？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 个答案: