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(pink
或 blue
,具体取决于 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/
我正在尝试为一个网站开发一个图片库,该图片库根据分类法(在本例中,用于描述图片所属的事件)切换图片。
我在存档中呈现了分类法列表,并使用数据属性来保存分类法 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(pink
或 blue
,具体取决于 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/