jquery - 如果没有更多图片，则禁用(下一个/上一个)按钮

Question

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

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

j查询

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 按钮已禁用，但不是在图片设置完成后立即禁用!你应该再点击一次按钮来禁用它，

如何使这些按钮立即禁用？

谢谢

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