首页 文章

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

提问于
浏览 次
3

下面的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

5 回答

  • 1

    这总是适用于我（也将不透明度更改为80％并将光标更改为等待）

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

    这是我最后的代码：

    $("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');
    回复于
  • 1

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

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

    这将删除'click'处理程序（将其设置回默认值） .

    回复于
  • 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');        
});
    回复于
  • 2

    如果您使用的是JQuery UI，则可以使用disable方法 .

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

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

    回复于

相关问题