hasClass() 不能在带有变量的函数中工作

hasClass() not working in function with variable

我正在尝试为一个网站开发一个图片库,该图片库根据分类法(在本例中,用于描述图片所属的事件)切换图片。

我在存档中呈现了分类法列表,并使用数据属性来保存分类法 slug,以供稍后用作 class。

<?php
$terms = get_terms( 'event-name' );
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
 foreach ( $terms as $term ) {
   echo '<a href="#" class="tax-list" data-hide="' . $term->slug . '">' . $term->name . '</a> ';


 }
}?>

</div>
</div>
<div class="row" id="ms-container-photo">

<?php query_posts('post_type=photo-gallery&orderby=rand&showposts=-1'); ?>



<?php if(have_posts()): while(have_posts()): the_post();?>
<?php
  ++$counter;
  if($counter == 3) {
  $postclass = 'col-xs-6 col-sm-6';
  $counter = 0;
  } else { $postclass = 'col-xs-6 col-sm-3'; }
?>



<div class="<?php echo $postclass; ?> <?php $terms = get_the_terms( $post->ID, 'event-name' );
if ( !empty( $terms ) ){
// get the first term
$term = array_shift( $terms );
echo $term->slug;
}?> photo-gallery ms-item"><img data-original="<?php
echo types_render_field("photo-url", array("argument1"=>"value1","argument2"=>"value2","argument2"=>"value2"));
?>" class="lazy"></div>

<?php endwhile; ?>
<?php else: ?>
<?php wp_redirect(get_bloginfo('siteurl').'/404', 404); exit; ?>
<?php endif;?>
<?php wp_reset_query();?>

目标是,使用顶部回显的 link,能够根据添加到 class 的内容 hide/show div div 下面通过定义它的术语。我已经尝试使用 jQuery 来实现目标,老实说,我很困惑为什么它不起作用......希望你们中的一个能帮忙!

$(document).ready(function(){
    $('a.tax-list').click(function(e){
        e.preventDefault();
        var hideselect = $(this).attr('data-hide'); 
        var tohide = $('div.photo-gallery');

        function hidebytax() {
            if ($(tohide).hasClass(hideselect)) {
                $(tohide).addClass('pink')
            } else {
                $(tohide).addClass('blue')
            };
        };  
        hidebytax();
    }); 
});

为了简单起见,我只是选择添加一个 class(pinkblue,具体取决于 div.photo-gallery 附加的术语,但是当我单击一个触发 links,无论单击哪个 link,总是添加 pink,并且完全忽略 else 语句。

谁能告诉我哪里出错了?

首先通过删除所有粉色(&蓝色)classes 来重置 div,然后将属性用作 class 选择器,向它们添加 class .pink并可选择使用 jquery not()

.blue 添加到其余 .photo-gallery div

尝试:

$('a.tax-list').click(function(e){
         $('.photo-gallery ').removeClass('pink');
        e.preventDefault();
        var hideselect = $(this).attr('data-hide'); 
                $("."+hideselect).addClass('pink');
                //$('div.photo-gallery').not($("."+hideselect)).addClass('blue');

    }); 

jsfiddle: https://jsfiddle.net/yb6onm12/