下面的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'); });
解决方法:
这是我最后的代码:
$("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');