JQuery If условие (специфично для слайдера контента)

Question

Я новичок в JQuery, и у меня есть конкретный вопрос о форке IF-THEN-ELSE. Большая проблема для меня - синтаксис этого (я сосу на Javascript). Это помогло бы мне, если бы кто-нибудь смог «перевести» псевдокод в валидный код JQuery (или Javascript).

Псевдокод:

IF"# Contentshowroom" css "left" НЕ> 1960px

ТО Нажмите "# Forwardbutton". animate "#Contentshowroom" css "left" = + 980px

Иначе Вы не можете нажать на кнопку "# Вперед"

Answer 1

Поместите оператор if () в обработчик клика для #Forwardbutton, чтобы проверить левую позицию #Contentshowroom.

Если вы используете jQuery:

$('#Forwardbutton').click(function() {
    var $Content = $('#Contentshowroom');
    if( $Content.offset().left <= 1960 ) {
        $Content.animate({ left: '+= 980' });
    }
});

Так что теперь, когда вы нажимаете Forwardbutton, он проверит левую .offset() позицию Contentshowroom, чтобы увидеть, меньше или равно 1960px. И если это так, он оживит левую позицию дополнительно 980px.

Метод jQuery .offset() дает вам позиции top/left относительно body. Если вы хотите, чтобы он относился к родительскому контейнеру, используйте jQuery's .position() метод .

Answer 2

нажмите документ
анимация документа
смещение документа

$("#Forwardbutton").click( function( e ){

   // lookup is safe, no noticable performance cost.
   // though a reference makes it more losely coupled.
   // I'll leave it at your discretion.
   var target = $("#Contentshowroom")
   // NOTE: the offset parent should have position relative or absolute.
   , leftPos = target.offset().left; 

   if ( leftPos < 1960 ) {

      target.animate({
         left : leftPos + 980
      }); // see docs to tweak animation

   } // else do nothing.

} );

Можно также использовать e.preventDefault();, ноне делайте, если это не нужно, это избавит вас от головной боли, если вы добавите больше слушателей к своим кнопкам и обнаружите, что они не работают.

Answer 3

, если это нужно запустить один раз в начале, тогда

if ( $('#Contentshowroom').offset().left > 1960 )
{
  $('#Forwardbutton').click( function(){
    $('#Contentshowroom').animate({left:'+=980'});
  } );
}
else
{
  // if the #Contentshowroom is a link then 
  $('#Contentshowroom').removeAttr('href');
  // if the #Contentshowroom is a button then 
  // $('#Contentshowroom').attr('disabled',true);
}

Answer 4

// first store contentShowroom and it's left property to save getting > 1
var contentShowroom = $('#Contentshowroom');
var showroomLeft = contentShowroom.css('left');
var forwardButton = $('#Forwardbutton');

if (showroomLeft <= 1960){
  forwardButton.click(function(){
    contentShowroom.animate({left: showroomLeft + 980);
  }
}
else {
  forwardButton.unbind('click');
}