0

我有一个 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
}
4

1 回答 1

0

好的，伙计们，我已经想通了。

当我将类从禁用更改为非活动时，单击处理程序不会自动附加到“新”非活动按钮。

我为所有按钮添加了一个新类“mybutton”（例如，活动按钮将是 class="mybutton active"），然后在单击处理程序中查找该类，因此即使禁用的按钮也将通过代码运行.

这是我的新代码：

$(document).ready(function() {

  $('.mybutton').on("click", function(){
    if($(this).hasClass("inactive") || $(this).hasClass("active")) {
      $(this).toggleClass("active inactive");
    }

    // Disable if 1 active button, else inactive
    if($('.active').length == 1) {
      $('.inactive').toggleClass("inactive disabled");
    } else {
      $('.disabled').toggleClass("disabled inactive");
    }
  });

});

我不得不包装 $(this).toggleClass("active inactive"); if 语句中的语句让我感到困惑。

如果没有 if 语句，单击禁用的按钮会将其变为活动状态。为什么会发生这种情况？当它只是检查与切换相同的类时，为什么将按钮包装在 if 语句中修复它？

于 2012-10-22T07:14:59.857 回答