jQuery ändern Div Knopf Staaten & Klicken Sie auf Deaktivieren

Question

Der Javascript jQuery-Code unten funktioniert, außer I 2 Merkmale der auf die Schaltfläche Zustand hinzufügen möchte.

1. Wenn ein Benutzer auf eine der Schaltflächen klickt, dass die andere Schaltfläche nicht geklickt wurde eine neue Klasse bekommt (Blick).

2. Sowohl Schaltfläche Zustand unclickable ändern sollte.

[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

Hier ist endgültig code Ich ging:

$("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

Was ist das Problem? Das einzige, was ich sehen kann, dass Sie fehlt, ist

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

Dies entfernt die ‚Klick‘ Handler (es zurück auf die Standardeinstellung).

Answer 3

Ich würde Ihre click () Handler dies ändern:

$("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

Das funktioniert immer für mich (ändert sich auch die Opazität auf 80% und ändert den Cursor warten)

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

Answer 5

Wenn Sie JQuery UI verwenden Sie die Sperrmethode verwenden können.

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

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