禁用图库滑块上的按钮

问题描述

| 我正在尝试使我的javascript / jquery滑块按钮在到达滚动图像的末尾时处于停用状态（当图像一直向右移动时，必须停用MoveRight按钮，并且仅将MoveLeft按钮保持活动状态，与移动LeftButton相同），有人可以帮忙吗？我不确定我是否正在使用 .attr（）和removeAttr（）正确。我在下面粘贴了我的代码。

<script type=\"text/javascript\">
$(document).ready(function(){

//Check width of gallery div
var galleryWidth = $(\"#gallery\").innerWidth();
//Check width of galleryItem
var NoListed = $(\"ul.galleryItem li\").length;
var galleryItemWidth = 1881;    

$(\'.MoveRight\')
$(\'.galleryItem\').css(\'width\',galleryItemWidth);

//Check width of gallery div on resize
$(window).resize(function(){
    var galleryWidth = $(\"#gallery\").innerWidth();
  });

$(\'.MoveLeft\').click(function() {
  $(\".galleryItem2\").animate({\"left\": \"-=350px\"},\"slow\");
  $(\".galleryItem3\").animate({\"left\": \"-=280px\"},\"slow\");
  $(\".galleryItem\").animate({
    left: \'-=230\',},\"slow\",function() {
    position = $(\".galleryItem\").position();
    galleryItemLeft = position.left;
    if(galleryItemLeft <= galleryWidth - galleryItemWidth) {
        $(\'.MoveLeft\').removeAttr(\'disabled\');}
        else{
        $(\'.MoveLeft\').attr(\'disabled\',\'disabled\');
        $(\'.MoveRight\').attr(\'disabled\',\'disabled\');
    }
  });
});

$(\'.MoveRight\').click(function() {
  $(\".galleryItem2\").animate({\"left\": \"+=350px\"},\"slow\");
  $(\".galleryItem3\").animate({\"left\": \"+=280px\"},\"slow\");
  $(\".galleryItem\").animate({
    left: \'+=230\',function() {
    position = $(\".galleryItem\").position();
    galleryItemLeft = position.left;
    if(galleryItemLeft >= \"0\") { 
        $(\'.MoveLeft\').removeAttr(\'disabled\');}
        else{
        $(\'.MoveLeft\').attr(\'disabled\',\'disabled\');
    }   
  });
});

});


</script>

    

解决方法

首先，我看到您正在执行以下操作：

//Check width of Gallery div on resize
$(window).resize(function(){
    var galleryWidth = $(\"#Gallery\").innerWidth();
});

我喜欢将变量保持在本地的事实，但是在这种情况下应省略var关键字。您已经在封装此大小调整回调的函数中声明了galleryWidth，因此通过在此处省略var关键字，会将值分配给您在脚本中使用的变量，并使用va关键字创建一个新的galleryWidth变量，仅在resize回调中可见，因此从不使用。 现在用于启用和禁用按钮： 您可以保留一个currentitem计数器，并在每次单击moveright或moveleft按钮时对其进行更新。当此计数器达到0时，您将禁用“向左移动”按钮，当计数器达到项目数时，将禁用“向右移动”按钮，否则将其启用。