我想在我的Wordpress循環中運行Javascript並且它不會識別PHP變量。我想要它，所以當單擊一個框時，它會顯示隱藏的內容，然後當再次單擊另一個框或該框時，它應該隱藏所有內容。在Wordpress循環中的Javascript
$(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>
工作分類，但當我點擊wordpress循環中的第一個框時，它將全部切換。 –
所以給部分，你想要切換一個特定的ID或類 – kerv
<?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，然後開始一個新的。
jquery也被稱爲。當我點擊第一個孩子時，它的作用達到了切換全部的程度。我需要它爲每個帖子類型單獨執行 –
您在foreach循環中每次都輸出帶有show'div的div，因此您的click事件正在附加到所有這些div。將每一個唯一標識爲起點。 – johnnyd23
我給每個人一個獨特的ID，但他們都可以一次顯示，我只想一次顯示一個。這有可能嗎？ –
<?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個？
你可以發佈整個循環？這個代碼之前調用jQuery？任何錯誤？ – johnnyd23