我有一个 jQuery 移动页面,其中包含许多用作按钮的图像。
当页面最初加载时,所有图像都有一个“非活动”类。如果我单击其中一个按钮,它的类将更改为“活动”,并且所有其他按钮都从“非活动”更改为“禁用”。如果我离开页面并直接向后导航,则 1 个图像仍然具有“活动”类,其余图像仍然具有“禁用”类。
当我单击活动按钮时,它将类从“活动”更改为“非活动”,所有其他按钮将类从“禁用”更改为“非活动”。这使我可以选择另一个按钮作为活动按钮。
当我单击以前禁用但现在处于非活动状态的按钮之一时,单击事件不会触发。就好像它认为该类仍然像最初加载页面时那样被禁用。我已经检查了在 Firefox 中使用 Firebug 并且该类被正确设置为非活动状态,但它的行为仍然好像该类被禁用。
这是我的 jQuery:
$(document).ready(function() {
$('.inactive, .active').on("click", function(){
// Toggle active/inactive class
$(this).toggleClass("active inactive");
// Disable if 1 active button, else inactive
if($('.active').length == 1) {
$('.inactive').toggleClass("inactive disabled");
} else {
$('.disabled').toggleClass("disabled inactive");
}
});
});
和 HTML 按钮:
<a class="button inactive"></a><br />
<a class="button inactive"></a><br />
<a class="button inactive"></a><br />
<a class="button inactive"></a><br />
<a class="button inactive"></a><br />
<a class="button inactive"></a>
和课程:
.button {
background:url("../images/compare.png") no-repeat;
width: 18px;
height:18px
}
.active {
background-position: 0 -18px;
cursor:pointer
}
.inactive {
background-position: 0 0;
cursor:pointer
}
.disabled {
background-position: 0 -36px;
cursor:default
}