Javascript внутри цикла Wordpress

Question

Я пытаюсь запустить Javascript внутри своего цикла Wordpress и не будет распознавать переменные 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 каждой индивидуальной метки типа сообщения. У кого-нибудь есть совет? Благодарю.

Answer 1

Возможно, это сработает для вас.

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

Answer 2

<?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, а затем начинает новый.

Answer 3

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

Есть ли способ отображения только по одному за раз?