Question

我是JQuery的新手，我有一个关于IF-THEN-ELSE分支的具体问题。对我来说最大的问题是这个的语法（我吮吸Javascript）。如果任何人都可以将伪代码“转换”为JQuery（或Javascript）valide代码，那将对我有所帮助。

伪代码：

IF “#Contentshowroom”css“left”不是＆gt; 1960px

，然后 点击“#Forwardbutton”DO 动画“#Contentshowroom”css“left”= + 980px

ELSE 您无法点击“#Forwardbutton”

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's .offset() method为您提供相对于top/left的{{1}}个职位。如果您希望它相对于其父容器，请使用jQuery's .position() method。

Answer 2

click doc
animate doc
offset doc

$("#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

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

Answer 4

如果要在开始时运行一次

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

JQuery If条件（特定于内容滑块）

4 个答案: