Блог

Главная - Вопросы по программированию - Могу ли я назначить функцию на основе условия в jquery?

Могу ли я назначить функцию на основе условия в jquery?

#javascript #jquery #conditional #chaining

#javascript #jquery #условные операторы #цепочка

Вопрос:

У меня есть две похожие функции, как показано ниже;

Для функции последнего элемента;

 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'amp;amp; '-' '1200', /* -- Dif-2 -- */
        opacity:0
    },500, function(){
        $this
        .addClass('hide')
            pos==='next' ? next() : prev()  /* -- Dif-3 -- */
        .removeClass('hide').animate({
            left:'0',
            opacity:1
        },500)
    });    
}

Я хочу определить функцию next() или prev() в соответствии с переменной pos (pos===’next’ ? next() : prev() ). Как я могу это сделать?

Ответ №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>

Комментарии:

1. next() и prev() возвращают элемент, они не обновляют obj объект напрямую. Я думаю, вы забыли обновить obj по назначению.

2. да, вы правы .. мы должны обновить переменную obj следующим образом obj = obj.next();