jQuery 更改 Div 按钮状态并单击禁用答案

【问题标题】：jQuery Change Div Button States & Click DisablejQuery 更改 Div 按钮状态并单击禁用
【发布时间】：2010-10-20 07:39:04
【问题描述】：

下面的 javascript jQuery 代码可以工作，除了我想为按钮的状态添加 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'); });

【问题讨论】：

标签： javascript jquery css user-interface frontend

【解决方案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');

【讨论】：

【解决方案2】：

有什么问题？我唯一能看到你失踪的是

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

这将删除“点击”处理程序（将其设置回默认值）。

【讨论】：

感谢解绑建议，我更进一步并补充说：.unbind('click'); .unbind('鼠标悬停'); .unbind('mouseout');要完全禁用按钮交互，一旦用户单击了两个按钮之一。
你可以使用 .unbind() （不带任何参数）来取消绑定所有绑定的事件。

【解决方案3】：

我会将您的 click() 处理程序更改为：

$("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');        
});

【讨论】：

也是个好建议，我在元素的基类上使用了 removeClass("look") （而不是更改的类名）。

【解决方案4】：

这总是对我有用（也将不透明度更改为 80% 并将光标更改为等待）

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

【讨论】：

【解决方案5】：

如果你使用的是 JQuery UI，你可以使用 disable 方法。

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

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

【讨论】：