Question

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

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

每个帖子＃也有一类喜欢或不喜欢。

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

<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我隐藏了所有帖子，无论他们的课程如何。显然，我只希望Hide Liked复选框隐藏class =“like”的帖子和Hide Disliked复选框以隐藏class =“dislike”的帖子。此外，当我再次单击该复选框时，post 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();
    }

我做错了什么？ }）;

Answer 1

您需要循环选择器而不是仅将切换应用于所有匹配项：

$("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();
});

Answer 2

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

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

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

Answer 3

.is（）检查每个元素，所以当你调用

时

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

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

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

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

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

Answer 4

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

我觉得这样的事情会对你有用。

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

如果复选框的初始状态可能最终与帖子的初始显示状态不同步，您可能还想考虑不使用.toggle（）。

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

4 个答案: