如果没有更多图片，则禁用（下一个/上一个）按钮答案

【问题标题】：Disable (nxt/prv) buttons if there is no more pics如果没有更多图片，则禁用（下一个/上一个）按钮
【发布时间】：2011-06-07 07:36:50
【问题描述】：

我已经在这里问过同样的问题之后我想出了这段代码：

css

div#big_container{
margin:0;
padding:30px;
width: 230px;
height: 130px;
border:1px solid #f0f0f0;
background-color: #f0f0f0;
text-align: center;
z-index:-100;
}

div#container{
overflow: hidden;
width: 207px;
background-color: #f0f0f0;
}

div#content {
position:relative;

}

button#left{
position:absolute;
top:90px;
left:2px;
z-index:1;
}

button#right{
position:absolute;
top:90px;
left:246px;
z-index:1;
}

jquery

var size =  $("#content table").find('tr').first().find('td').size();
var position = 1;

    $("#left").click( function() {
    if(position < (size / 2)) {
        $('#right').removeAttr('disabled');
        $("#content").animate({"right": "+=198px"}, "fast");
         position ++;
    }else{
       $('#left').attr("disabled", "true");
    }
    });


    $("#right").click( function() {
    if( position > 1) {
        $('#left').removeAttr('disabled');
        $("#content").animate({"right": "-=198px"}, "fast");
         position --;
    }else{
        $('#right').attr("disabled", "true");
    }
    });

html

<button id="left"><<</button>
<button id="right">>></button>

<div id="big_container">
<div id="container">
<div id="content">
<table border="0">
<tr>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
</tr>
<tr>
<td>Description1</td>
<td>Description2</td>
<td>Description3</td>
<td>Description4</td>
<td>Description5</td>
<td>Description6</td>
</tr>
</table>
</div>
</div>
</div>

这对我来说没问题，但请看现场演示

http://jsfiddle.net/bm4G4/

您会看到 nxt 和 prv 按钮被禁用，但不是在图片设置完成后立即禁用！你应该再点击一次按钮来禁用它，

如何让这些按钮立即失效？

谢谢

【问题讨论】：

标签： jquery html css slider

【解决方案1】：

应该这样做

$("#left").click( function() {
if(position < (size / 2)) {
    $('#right').removeAttr('disabled');
    $("#content").animate({"right": "+=198px"}, "fast");
     position ++;
}if(position >= (size / 2)){
   $('#left').attr("disabled", "true");
}
});


$("#right").click( function() {
if( position > 1) {
    $('#left').removeAttr('disabled');
    $("#content").animate({"right": "-=198px"}, "fast");
     position --;
}if(position == 1){
    $('#right').attr("disabled", "true");
}
});

【讨论】：

谢谢你现在的工作，但我忘记了什么，我怎样才能从一开始就禁用左键？谢谢你的帮助
101 , 谢谢你的关心，现在好多了

【解决方案2】：

http://jsfiddle.net/bm4G4/1/
而且你真的应该反转动画的方向，现在的方式令人困惑。

$("#left").click(function() {
    $('#right').removeAttr('disabled');
    $("#content").animate({
        "right": "+=198px"
    }, "fast");
    position++;

    if (position == (size / 2)) {
        $('#left').attr("disabled", "true");
    }
});


$("#right").click(function() {

    $('#left').removeAttr('disabled');
    $("#content").animate({
        "right": "-=198px"
    }, "fast");
    position--;
    if (position == 1) {
        $('#right').attr("disabled", "true");
    }
});

【讨论】：