Question

我有一个过滤器按钮，可以将某些子元素从默认禁用状态（.class）切换为启用（.class）。我使用toggleclass（）删除.disabled并添加在style.css中为空的.enabled类。

虽然我成功删除了.disabled类并添加了.enabled类，但在反向转换时我的代码失败了。我无法回到残疾人状态。这是我的代码：

Jquery的

$(".filter-btn").click(function(){
        var button = $(this);
        button.toggleClass("btn-default btn-primary");
        button.html("xxxxxxxxxxx: ");
        var container = button.closest(".form-group.sr-page");
        if(container.find(".disabled")){
            container.find(".disabled").toggleClass("disabled enabled");
        }
        else if (container.find(".enabled"))
            container.find(".enabled").toggleClass("disabled enabled");
        }
    });

CSS

.disabled {
    color: #AAAAAA;
    pointer-events: none;
}
.enabled {

}

任何帮助都将不胜感激。

Answer 1

首先，您在}之后还有一个额外的结束{（或缺少的开头else if）。也许是一个错字。

其次，而不是这个（只是改变了禁用/启用元素的启用状态）：

if (container.find(".disabled")) {
    container.find(".disabled").toggleClass("disabled enabled");
} else if (container.find(".enabled"))
    container.find(".enabled").toggleClass("disabled enabled");

你可以用这个：

container.find(".enabled, .disabled").toggleClass("enabled disabled");

这不仅有效 - https://jsfiddle.net/63m1oh6p/ - 而且比原始代码简单得多但是它略有不同 - 它将切换 启用或禁用的所有元素，而原始代码只会切换一个组。< / p>

现在，由于您可能想知道为什么您的代码无效，我们需要关注这一行：

if (container.find(".disabled")) {

接下来，让我们看看find() -
的文档

给定一个表示一组DOM元素的jQuery对象，   .find（）方法允许我们搜索这些的后代   DOM树中的元素并从中构造一个新的jQuery对象   匹配元素。

此外，如果您查看 Description 段落，您会注意到函数的返回值是jQuery object，我们可以在其中阅读以下内容：


jQuery对象可能为空，不包含DOM元素。您可以使用$（）创建一个空的jQuery对象（即根本不传递任何参数）。如果选择器未选择任何元素，或者链式方法过滤掉所有元素，则jQuery对象也可能为空。这不是错误;调用jQuery对象的任何其他方法都没有任何效果，因为它们没有任何元素可以作用。

你有这个：

if (container.find(".disabled")) {

我猜你应该已经明白发生了什么 if只有在给定值有问题时才会传递，即0，null，空字符串。
find返回了一个完全有效的true-ty对象。因此，无论是否选择了元素，您的支票始终都会通过。

现在你的问题可能改为如何来检查jQuery选择器是否返回了任何DOM元素。请在此处阅读：Determining whether jQuery has not found any element。

Answer 2

通过创建一个单独的类来表示要启用或禁用哪些dom元素，可能会更好。请看下面的例子：

<div class="form-group">
  <input type="button" value="Click me" class="filter-btn btn-default" />
  <input type="text" value="Change this one" class="enabled enabled-disabled" />
  <input type="text" value="Do not change" />
</div>

Jquery的：

$(".filter-btn").click(function(){
    var button = $(this);
    button.toggleClass("btn-default btn-primary");
    var container = button.closest(".form-group");
    if(container.find(".enabled-disabled")){
      container.find(".enabled-disabled").toggleClass("disabled enabled");
    }
});

Here is demo

无法替换使用toggleClass添加类

2 个答案: