Question

我想检查复选框的值，并将此值与多个div的类进行比较：＆＃34; entry＆＃34;。如果复选框值与＆＃34;条目div＆＃34;的类相同输入div将显示。

这是我的代码：

<div class="entry float-left span4">
                        <a href="<?php the_permalink(); ?>">
                        <div class="span3">
                            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                            <img class="art-circle" src=<?php echo $image[0]; ?> />
                        </div>
                        </a>
                        <div class="span8 entry-text">
                            <a href="<?php the_permalink(); ?>">
                                <h1><?php the_title(); ?></h1> 
                            </a>
                            <div class="art-date"><?php the_field('datum'); ?></div>   
                            <a href="<?php the_permalink(); ?>">         
                                <p><?php the_excerpt(); ?></p>
                            </a>
                            <div class="art-location"><?php the_field('plaats'); ?></div> 
                        </div>
                    </div>

HTML复选框

<ul class="submenu">
            <label class="checkbox">
                <input type="checkbox" value="visueel">Visueel
            </label>
            <label class="checkbox">
                <input type="checkbox" value="auditief">Auditief
            </label>
            <label class="checkbox">
                <input type="checkbox" value="cognitief of neurologisch">Cognitief of neurologisch
            </label>
            <label class="checkbox">
                <input type="checkbox" value="fysiek">Fysiek
            </label>
            <label class="checkbox">
                <input type="checkbox" value="spraak">Spraak
            </label>
       </ul>

JQuery的

$('input[type="checkbox"]').change(function(){
        var checkboxname = $(this).val();
        $('.entry').each(function(i, obj) {
            var tags = $(this).find('.tags').html().toLowerCase();
            var arr = tags.split(',');
            $.each( arr, function( key, value ) {
              if(checkboxname==value){
                  alert(checkboxname+':'+value);
              }
            });
        });     
})

而不是警报我需要选择正确的输入div并说它可以显示。我只是不知道如何选择这个特殊的入口div。我不能使用$（this），因为这是指复选框，如果我使用.entry，我会显示所有这个类的div。什么是正确的解决方案？

Answer 1

<强> FIDDLE：

<强> http://jsfiddle.net/Hwwzv/1/

<强> HTML：

<div class="submenu">
    <label class="checkbox">
        <input type="checkbox" value="visueel">Visueel
    </label>
    <label class="checkbox">
        <input type="checkbox" value="auditief">Auditief
    </label>
</div>

<div class="entry visueel">This is visual div</div>
<div class="entry auditief">This is auditief div</div>

<强> CSS：

.entry{
    display:none;
}

<强> JQUERY：

$('input[type="checkbox"]').change(function () {
    var checkboxname = $(this).val();
    if ($(".entry").hasClass(checkboxname)) {
        if ($(this).is(":checked")) {
            $(".entry." + checkboxname).show();
        } else {
            $(".entry." + checkboxname).hide();
        }
    }
});

Answer 2

使用hasClass方法

尝试此操作

$('input[type="checkbox"]').change(function(){
        var checkboxname = $(this).val();
    var checkedValue = $(this).is(':checked');
        // iterate all entry divs and show only matched div with checkbox value
        $('.entry').each(function() {

           if($(this).hasClass(checkboxname))
            {
               if(checkedValue)
                 $(this).show();
               else
                 $(this).hide();   
             }
         });
   });

这是有效的JSFiddle

Answer 3

最后，我使用此代码首先显示所有条目，然后检查选择了哪些过滤器以显示所有相关条目：

$('input[type="checkbox"]').change(function () {
    $('.entry').hide();
    $('input[type=checkbox]:checked').each(function(){
        var textname = $(this).val();
        $('.'+textname).each(function(){
            $(this).show();
        });
    });
});

感谢您的答案，因为它可以解决我的问题

选中右侧复选框时显示div

3 个答案: