jQuery的變化股利按鈕狀態和單擊禁用

Question

以下作品中的JavaScript jQuery代碼，但我想2層的功能添加到該按鈕的狀態。

1. 當用戶單擊其中一個按鈕時，未點擊的另一個按鈕將獲得一個新類（外觀）。

2. 兩個按鈕的狀態應更改爲不可點擊。

 
[div id="1" class="__button_image"] [/div] 
[div id="2" class="__button_image"] [/div] 

 
$("div.__button_image").mouseover(function() { 
    $(this).addClass("__button_image_hover"); 
}); 

$("div.__button_image").mouseout(function() { 
    jq(this).removeClass("__button_image_hover"); 
}); 

$("div.__button_image").click(function() { 
    $(this).removeClass("__button_image_hover"); 
    $(this).addClass("__button_image_clicked"); 

    jQuery.get('/do/request');   
}); 

Answer 1

下面是最後的代碼我去：

$("div.__button_image").mouseover(function() { 
    $(this).addClass("__button_image_hover"); 
}); 

$("div.__button_image").mouseout(function() { 
    $(this).removeClass("__button_image_hover"); 
}); 

$("div.__button_image").click(function() { 

    /** change button look to 'clicked' */ 
    $(this).addClass("__button_image_clicked"); 

    /** get the id of the current button */ 
    b_id = $(this).attr('id'); 

    /** unbind both vote buttons for *no* interaction */ 
    $("div.__button_image").unbind('click'); 
    $("div.__button_image").unbind('mouseover'); 
    $("div.__button_image").unbind('mouseout'); 

    /** 
    * wire the .each function to iterate the classes 
    * so we can change the look of the one that was 
    * not clicked. 
    */ 
    $('div.__button_image').each(function() { 
     button_id = $(this).attr('id'); 
     if(button_id!=b_id) { 
     $('#'+button_id).removeClass("__button_image"); 
     $('#'+button_id).addClass("__button_image_gray"); 

    } 
}); 

jQuery.get('/do/request?id='+b_id); 
$(this).parent().css('cursor', 'default'); 

Answer 2

什麼問題？我只能看到你缺少的是

$("div.__button_image").unbind('click'); 

這將刪除'click'處理程序（將其設置回默認值）。

Answer 3

我想你的點擊（）處理程序改成這樣：

$("div.__button_image").click(function() { 
    $(this).removeClass("__button_image_hover"); 
    $(this).addClass("__button_image_clicked"); 

    /* 
    * Add look class to all buttons, then remove it from this one 
    */ 
    $("div.__button_image").addClass("look"); 
    $(this).removeClass("look"); 

    /* 
    * Remove click handler from all buttons 
    */ 
    $("div.__button_image").unbind('click'); 

    jQuery.get('/do/request');   
}); 

Answer 4

這總是對我的作品（也改變不透明度爲80％並將光標更改爲等待）

$("#buttonDivId").css({opacity: 0.8, cursor: "wait"}).prop("disabled", true); 

Answer 5

如果您使用JQuery UI，則可以使用disable方法。

$("selector").button("disable"); 

http://api.jqueryui.com/button/