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

首先通过删除所有粉红色（＆amp; blue）类重置div，然后将该属性用作类选择器，向其中添加类.pink，并可选择将.blue添加到其余部分。 .photo-gallery使用jquery not()

进行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/

hasClass（）在变量

1 个答案: