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

Question

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

伪代码：

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

然后 点击“#Forwardbutton”即可 animate "#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 时，它将检查 Contentshowroom 的左侧 .offset() 位置查看它是否小于或等于1960px。如果是这样，它将为左侧位置添加额外的 980px 动画。

jQuery 的 .offset() 方法 为您提供 top/left< /code> 相对于 body 的位置。如果您希望它相对于其父容器，请使用 jQuery 的 .position() 方法< /a>.

Answer 2

点击文档
动画文档
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);
}