jQuery 复选框切换所有 div 而不仅仅是特定的答案

【问题标题】：jQuery checkbox toggles all divs instead of only specific onesjQuery 复选框切换所有 div 而不仅仅是特定的
【发布时间】：2011-12-24 19:05:22
【问题描述】：

我的页面显示包含帖子的 div。 div 具有以下格式（您看到 # 是我数据库中的 postID）：

<div id="post_#>
    <div id="post_#_inside">
        <div id="like_#">
        </div>
        <div id="dislike_#">
        </div>
    </div>
</div>

每个 post_# 还包含一个喜欢或不喜欢的类别。

我还有两个复选框。他们的目标是切换所有喜欢的帖子或所有不喜欢的帖子。

<form name="myform" action="" method="post">
<fieldset>
    <p class="left"><input id="show_likes" name="show_likes" type="checkbox" value="1" class="choice"/>
    <label for="b1">Hide Liked</label></p>

    <p class="right"><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" class="choice"/>
    <label for="b1">Hide Disliked</label></p>
</fieldset>
</form>

我的问题是我拥有的 jQuery 隐藏了所有帖子，无论它们的类别如何。显然，我只想要隐藏喜欢的复选框来隐藏带有 class="like" 的帖子和隐藏不喜欢的复选框来隐藏只有 class="dislike" 的帖子。此外，当我再次单击复选框时，帖子 div 确实返回，但 div 内的内容仍然隐藏（我得到的 div 有背景但没有文字）。

我的 jQuery：

//When Hide Liked checkbox clicked, toggle all liked contests.
$("input[name*='show_likes']").click(function() {
    if ($('[id^=post_]').is('.like')) {
        $('[id^=post_]').toggle();
    }
});

//When Hide Disliked checkbox clicked, toggle all disliked contests.
$("input[name*='show_dislikes']").click(function() {
    if ($('[id^=post_]').is('.dislike')) {
        $('[id^=post_]').toggle();
    }

我做错了什么？ });

【问题讨论】：

标签： ajax html toggle jquery

【解决方案1】：

您当前的代码检查以 ID post_ 开头的任何元素是否包含类 .like。然后，您创建一个新的 jQuery 对象，使用id^=post_ 选择所有元素，并使用toggle。

不要使用.is('.like')，而是使用.like 扩展您的选择器。
下面的代码解决了你的问题：

$("input[name*='show_likes']").click(function() {
    $('[id^=post_].like').toggle();
});

【讨论】：

.is() 上的快速更正，它检查选择中的每个元素，因此如果选择中的任何元素匹配，它将返回 true。 docs.jquery.com/Is

【解决方案2】：

$('#show_likes').click(function(){ $('.like').toggle(); });

我认为这样的东西对你有用。

但是，您可能想考虑一些更强大的东西。如果用户使用 TAB 导航到控件，然后使用空格键选中该框怎么办？

如果复选框的初始状态可能最终与帖子的初始显示状态不同步，您可能需要考虑不使用 .toggle()。

【讨论】：

你是对的。我正在考虑将复选框更改为自定义按钮，我们会看到

【解决方案3】：

您需要循环访问您的选择器，而不是仅仅将切换应用到所有匹配项：

$("input[name*='show_likes']").click(function() {
    $('[id^=post_]').each(function() {
        if ($(this).is('.like')) {
            $(this).toggle();
        }
    });
});

但是，既然你可以.filter() 去掉不需要的元素，为什么还要这样做呢？

$("input[name*='show_likes']").click(function() {
    $('[id^=post_]').filter('.like').toggle();
});

【讨论】：

@Jonathan $('[id^=post_].like').toggle(); 效率更高。不过，如果您想执行更复杂的操作，建议您使用此答案的第一个块。

【解决方案4】：

.is() 检查每个元素，所以当你调用

if ($('[id^=post_]').is('.like')) {
    $('[id^=post_]').toggle();
}

如果 ID 以 post_ 开头的任何元素也具有 like 类，则所有元素都将被切换。您还重新查询了 DOM，因此即使您按类似类的元素进行过滤，所有 post_ 仍将被切换。

更合适的解决方案是查询您的喜好

$( ".like" ).toggle();

参考：http://docs.jquery.com/Is

【讨论】：