javascript - jQuery 更改 Div 按钮状态并单击禁用

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');