Отключить кнопки

Question

Мне нужна помощь в отключении двух кнопок (вправо/влево) в слайд-шоу, когда они достигают своих границ - fiddle; изменение фонового цвета и типа курсора по умолчанию было бы достаточно. Это код JQuery:

var menuItem_place = 0; 
var menuItem_position = 0; 
var menuItem_limit = parseInt($('.menuItem').length) - 1; 

$('.menuItem:first .content').css({margin: 0, height: '100%', lineHeight: '99px'}) 

$('#rightBtn').on('click', function(){ 
    if (menuItem_place < menuItem_limit) { 
     menuItem_place++; 
    } 
    menu_animate(); 
}); 

$('#leftBtn').on('click', function(){ 
    if (menuItem_place > 0){ 
     menuItem_place--; 
    } 
    menu_animate(); 
}); 

var menuitems = $('.menuItem'); 
var contents = $('.content', menuitems); 

menuitems.click(function(){ 
    menuItem_place = $(this).index(); 
    menu_animate() 
}); 

function menu_animate() { 
    contents.animate({margin: 20, height: '64%', lineHeight: '63px'}, 300); 
    $(contents.get(menuItem_place)).stop().animate({margin: 0, height: '100%', lineHeight: '99px'}, 100) 
    menuItem_position = 0 - (menuItem_place * 200); 
    $('#menuContainer').stop().animate({left: menuItem_position + 'px'}, 300); 
} 

Код не мой, и это вне моей способности делать то, что мне нужно. Любая помощь будет оценена по достоинству. Thanx.

Педро

Answer 1

Просто проверьте menuItem_place, чтобы узнать, равен ли он нулю (первый элемент) или равен $('.menuItem').length - 1 (последний элемент). Я создал класс (.disabled), который применяется или удаляется на основе этих условий.

jsFiddle example

var menuItem_place = 0; 
var menuItem_position = 0; 
var menuItem_limit = parseInt($('.menuItem').length) - 1; 
if (menuItem_place == 0) $('#leftBtn').addClass('disabled'); // <-- NEW 
$('.menuItem:first .content').css({ 
    margin: 0, 
    height: '100%', 
    lineHeight: '99px' 
}) 

$('#rightBtn').on('click', function() { 
    if (menuItem_place < menuItem_limit) { 
     menuItem_place++; 
    } 
    menu_animate(); 
}); 

$('#leftBtn').on('click', function() { 
    if (menuItem_place > 0) { 
     menuItem_place--; 
    } 
    menu_animate(); 
}); 

var menuitems = $('.menuItem'); 
var contents = $('.content', menuitems); 

menuitems.click(function() { 
    menuItem_place = $(this).index(); 
    menu_animate() 
}); 

function menu_animate() { 
    contents.animate({ 
     margin: 20, 
     height: '64%', 
     lineHeight: '63px' 
    }, 300); 
    $(contents.get(menuItem_place)).stop().animate({ 
     margin: 0, 
     height: '100%', 
     lineHeight: '99px' 
    }, 100) 
    menuItem_position = 0 - (menuItem_place * 200); 
    $('#menuContainer').stop().animate({ 
     left: menuItem_position + 'px' 
    }, 300); 
    $('#rightBtn,#leftBtn').removeClass('disabled'); // <-- NEW 
    if ($('.menuItem').length - 1 == menuItem_place) $('#rightBtn').addClass('disabled'); // <-- NEW 
    if (menuItem_place == 0) $('#leftBtn').addClass('disabled'); // <-- NEW 
} 

Answer 2

Я не уверен, что вы подразумеваете под 2 кнопкой ограниченной, но я могу только предположить, что вы имеете в виду левые и правые кнопки.

Я обновил ваш код jsfiddle, см. Ниже.

http://jsfiddle.net/xkUYm/1/

Все, что я сделал, чтобы сказать им, чтобы display:none в CSS

ИЛИ

вы можете удалить их из HTML все вместе.