JQuery تغيير DIV زر زر وانقر فوق تعطيل

Question

يعمل رمز JavaScript JQuery أدناه، إلا أنني أود إضافة ميزات 2 إلى حالة الزر.

1. عندما ينقر المستخدم على أحد الأزرار، يحصل الزر الآخر الذي لم ينقر فوق فئة جديدة (انظر).

2. يجب أن تتغير كلا حالة الزر إلى غير قابلة للحياة.

ID DIV = "1" فئة = "__ button_Image"] [/ div] [div id = "2" فئة = "__ button_image"] [/ div

$ ("div. __ button_image"). Mouseover (وظيفة () {$ (this) .addclass ("__ button_image_hover")؛}؛ $ ("div. __ button_image"). Mouseout (وظيفة () {jq (this) .removeclass ("__ button_image_hover")؛}؛ $ ("div. __ button_image"). انقر (وظيفة () {$ (this) .Removeclass ("__ button_image_hover")؛ $ (this) .addclass ("__ button_image_clicked")؛ jquery.get ('/ do / طلب') ؛})

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

سيؤدي ذلك إلى إزالة معالج "انقر فوق" (إعداده مرة أخرى إلى الافتراضي).

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، يمكنك استخدام طريقة تعطيلها.

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

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