在Wordpress循环中的Javascript

我想在我的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循环内。任何人有任何建议？谢谢。

来源

2016-03-16 Lloyd Blount

你可以发布整个循环？这个代码之前调用jQuery？任何错误？ – johnnyd23

也许这会适合你。

<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>

来源

2016-03-16 14:28:55 kerv

工作分类，但当我点击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，然后开始一个新的。

来源

2016-03-16 14:35:54

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个？

来源

2016-03-16 14:56:39

在Wordpress循环中的Javascript

回答

相关问题