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

【问题标题】：JQuery If condition (specific for a content slider)JQuery If 条件（特定于内容滑块）
【发布时间】：2011-05-04 23:57:01
【问题描述】：

我是 JQuery 的新手，我有一个关于 IF-THEN-ELSE 分支的具体问题。对我来说最大的问题是它的语法（我很擅长 Javascript）。如果有人可以将伪代码“翻译”成 JQuery（或 Javascript）验证代码，那将对我有所帮助。

伪代码：

IF "#Contentshowroom" css "left" is NOT > 1960px

那么点击“#Forwardbutton”做动画“#Contentshowroom”css“左”=+980px

ELSE不能点击“#Forwardbutton”

【问题讨论】：

标签： javascript jquery conditional-statements jquery-animate conditional-operator

【解决方案1】：

将 if() 语句放在#Forwardbutton 的点击处理程序中以测试#Contentshowroom 的左侧位置。

如果您使用的是 jQuery：

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

所以现在当你点击Forwardbutton时，它会检查Contentshowroom左边的.offset()位置，看它是否小于或等于1960px。如果是这样，它将为左侧位置设置一个额外的动画980px。

jQuery's .offset() method 为您提供相对于body 的top/left 位置。如果您希望它相对于其父容器，请使用jQuery's .position() method。

【讨论】：

+1 但是，我还要添加... function(e) { e.preventDefault() });
@aSeptik - 当然值得注意，但我们并不完全确定点击的是什么，因此可能没有必要。不过不会痛。 :o)
+1 相同的 .offset() 想法，你可能第一个提到它，我不知道。

【解决方案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(); ，但如果不需要，请不要使用，如果您向按钮添加更多侦听器并发现它们不起作用，它会让您头疼。

【讨论】：

我认为您关于不使用.css() 的说明是正确的。如果left 没有使用CSS 设置，您可能会得到auto 而不是位置，您的双位非运算符将转换为0。
@patrick offset() 更好，在后台做的更少，所以完全改变了它。如果您在没有框架的情况下编写低级 javascript，BITWISE NOT 实际上很好用，但是使用了 jQuery，所以我最好不要使用它。

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

【讨论】：

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

【讨论】：