Флажок jQuery переключает все div вместо только определенных - PullRequest
Новая
       7

Флажок jQuery переключает все div вместо только определенных

0 голосов
/ 09 ноября 2011

На моей странице отображаются элементы, содержащие сообщения.Div имеет следующий формат (где вы видите # является postID в моей базе данных): 

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

Каждый post_ # также содержит класс like или dislike.

У меня также есть двафлажки.Их цель - переключать все понравившиеся сообщения или все не понравившиеся сообщения. 

<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».Кроме того, когда я снова ставлю флажок, сообщение post возвращается, но содержимое внутри 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();
    }

Что я делаю не так?});

Ответы [ 4 ]

3 голосов
/ 09 ноября 2011

Вам нужно было перебрать свой селектор вместо того, чтобы просто применять переключатель ко всем совпадениям: 

$("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();
});
2 голосов
/ 09 ноября 2011

Ваш текущий код проверяет, содержит ли любой элемент, начинающийся с идентификатора post_ класс .like. Затем вы создаете новый объект jQuery, выбирая все элементы с id^=post_ и используя toggle.

Вместо использования .is('.like'), расширьте ваш селектор с помощью .like.
Код ниже решает вашу проблему: 

$("input[name*='show_likes']").click(function() {
    $('[id^=post_].like').toggle();
});
0 голосов
/ 09 ноября 2011 
$('#show_likes').click(function(){ $('.like').toggle(); });

Я думаю, что-то подобное сработало бы для вас.

Однако вы можете рассмотреть что-то более надежное.Что если пользователь перейдет к элементу управления с помощью TAB, а затем использует пробел, чтобы установить флажок?

Также вы можете рассмотреть возможность не использовать .toggle (), если есть вероятность, что начальное состояниефлажок может не синхронизироваться с исходным состоянием отображения сообщений.

0 голосов
/ 09 ноября 2011

.is () проверяет каждый элемент, поэтому, когда вы вызываете 

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

, если какой-либо из элементов с идентификатором, который начинается с post_, также имеет класс like, тогда все элементыбудет переключенВы также повторно запрашиваете DOM, поэтому даже если вы фильтруете элементы с классом like, все post_ все равно будут переключаться.

Более подходящим решением было бы просто запросить ваши лайки 

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

ссылка: http://docs.jquery.com/Is

...