javascript - hasClass() 在带有变量的函数中不起作用

Question

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

我在存档中呈现了分类法列表，并使用数据属性来保存分类法段，以便稍后作为类使用。

<?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();?>

目标是，使用顶部回显的链接，能够根据通过定义它的术语添加到下面的 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();
    }); 
});

为了简单起见，我只是选择添加一个类(pink 或 blue，具体取决于 div.photo-gallery 附加的术语，但是当我单击一个触发链接时，无论单击哪个链接，总是添加pink，并且 else 语句完全被忽略。

谁能告诉我哪里出错了？

Answer 1

首先通过删除所有粉红色(和蓝色)类来重置 div，然后使用该属性作为类选择器，向它们添加类 .pink 并可选择添加 .blue 使用 jquery not()

到 .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/