我正在尝试在我的Wordpress循环中运行Javascript，但它无法识别PHP变量。我想要它，所以当单击一个框时，它将显示隐藏的内容，然后当再次单击另一个框或该框时，它应该隐藏所有内容。
$(document).ready(function(){
$("#show").on("click", function(e) {
var target = $(this).attr("href");
$(target).slideToggle("fast");
$("<?php echo $name; ?>").not(target).hide();
e.preventDefault();
});
});
这是在每个自定义帖子类型标签的 foreach 循环中。有人有什么建议吗？谢谢。
也许这对你有用。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#on").click(function(){
$("#area you want to hide/show").toggle();
});
});
</script>
<?php $args = array( 'public' => true,'_builtin' => false );
$output = 'names';
$i = 0;
$operator = 'and';
$post_types = get_post_types( $args, $output, $operator );
foreach ( $post_types as $post_type ) {
$link = get_post_type_object($post_type);
$name = $link->label;
$singular = $link->labels->singular_name;
$i++;
?>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
$(".<?php echo $post_type; ?>").toggle();
});
});
</script>
<?php if($i % (4 + 1) == 0 || $i == 1) {?>
<ul class="col-1-1">
<li class="col-1-4" >
<div class="backgroundimage" id="show" style="background-image: url('<?php the_field($post_type,'option'); ?>'); background-size: 100%;">
<h2 class="heading"><?php echo $singular; ?> </h2>
</div>
<div class="<?php echo $post_type; ?> col-1-1" style="display: none;">
<?php } else { ?>
<li class="col-1-4" >
<div class="backgroundimage" id="<?php echo $singular; ?>" style="background-image: url('<?php the_field($post_type,'option') ?>'); background-size: 100%;">
<h2 class="heading"><?php echo $singular; ?> </h2>
</div>
<div class="<?php echo $post_type; ?> col-1-1" style="display: none;">
<?php } ?>
<?php
// The Query
$args = array(
'post_type' => $post_type,
);
$wp_query = new WP_Query( $args );
$count = 0;
?>
<?php if ( $wp_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php $count++;
?>
<?php if($count == 1){ ?>
<div class="col-1-2 resource " >
<div class="interior" style="background-image: url('http://placehold.it/640x500');">
<div class="">
<div class="interiorbox">
<h3 class="col-10-12"><?php the_title(); ?> </h3>
<p class="number col-2-12"><?php echo $count ?></p>
<p class="col-1-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
<p class="col-1-1"><a href="abduzeedo.com">abduzeedo.com</a></p>
</div>
</div>
</div>
</div>
<?php } elseif ($count >= 4) { ?>
<?php } else { ?>
<div class="col-1-4 resource " >
<div class="interior" style="background-image: url('http://placehold.it/320x500');">
<div class="">
<div class="interiorbox">
<h3 class="col-10-12"><?php the_title(); ?></h3>
<p class="number col-2-12"><?php echo $count ?></p>
<p class="col-1-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
<p class="col-1-1"><a href="abduzeedo.com">abduzeedo.com</a></p>
</div>
</div>
</div>
</div>
<?php } ?>
<!-- post -->
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php if( $i % 4 == 0 ) { ?>
</div>
</li>
</ul>
<?php } else { ?>
</div>
</li>
<?php } ?>
<?php
}?>
这是choas，但对我来说是有意义的。它给了我 4 ul 的行，然后开始一个新的。
<?php $args = array( 'public' => true,'_builtin' => false );
$output = 'names';
$i = 0;
$operator = 'and';
$post_types = get_post_types( $args, $output, $operator );
foreach ( $post_types as $post_type ) {
$link = get_post_type_object($post_type);
$name = $link->label;
$singular = $link->labels->singular_name;
$i++;
?>
<script type="text/javascript">
$(document).ready(function(){
$("#<?php echo $post_type;?>s").click(function(){
$(".<?php echo $post_type; ?>").toggle();
});
});
</script>
<?php if($i % (4 + 1) == 0 || $i == 1) {?>
<ul class="col-1-1">
<li class="col-1-4" >
<div class="backgroundimage" id="<?php echo $post_type;?>s" style="background-image: url('<?php the_field($post_type,'option'); ?>'); background-size: 100%;">
<h2 class="heading"><?php echo $singular; ?> </h2>
</div>
<div class="<?php echo $post_type; ?> col-1-1" style="display: none;">
<?php } else { ?>
<li class="col-1-4" >
<div class="backgroundimage" id="<?php echo $post_type;?>s" style="background-image: url('<?php the_field($post_type,'option') ?>'); background-size: 100%;">
<h2 class="heading"><?php echo $singular; ?> </h2>
</div>
<div class="<?php echo $post_type; ?> col-1-1" style="display: none;">
<?php } ?>
<?php
// The Query
$args = array(
'post_type' => $post_type,
);
$wp_query = new WP_Query( $args );
$count = 0;
?>
<?php if ( $wp_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php $count++;
?>
<?php if($count == 1){ ?>
<div class="col-1-2 resource " >
<div class="interior" style="background-image: url('http://placehold.it/640x500');">
<div class="">
<div class="interiorbox">
<h3 class="col-10-12"><?php the_title(); ?> </h3>
<p class="number col-2-12"><?php echo $count ?></p>
<p class="col-1-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
<p class="col-1-1"><a href="abduzeedo.com">abduzeedo.com</a></p>
</div>
</div>
</div>
</div>
<?php } elseif ($count >= 4) { ?>
<?php } else { ?>
<div class="col-1-4 resource " >
<div class="interior" style="background-image: url('http://placehold.it/320x500');">
<div class="">
<div class="interiorbox">
<h3 class="col-10-12"><?php the_title(); ?></h3>
<p class="number col-2-12"><?php echo $count ?></p>
<p class="col-1-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
<p class="col-1-1"><a href="abduzeedo.com">abduzeedo.com</a></p>
</div>
</div>
</div>
</div>
<?php } ?>
<!-- post -->
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php if( $i % 4 == 0 ) { ?>
</div>
</li>
</ul>
<?php } else { ?>
</div>
</li>
<?php } ?>
<?php
}?>
有没有办法一次只显示 1 个？