如何从JQuery循环中获取特定值 - wordpress查询帖子

时间:2012-12-21 00:39:51

标签: php jquery wordpress

我有一个问题是能否从隐藏的输入框中获取值:

<?php  $i = 0; $j = 1;?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', get_post_format() ); 
        $postid[$i] = get_the_ID();
        echo "<input type='hidden' value='".$postid[$i]."' id='hiddenpostitle".$j."' name='hiddenpostitle'/> ";
        echo "<input type='hidden' value='".$j."' id='hiddenpostnumfield".$j."'/> ";            
    ?>
    <?php 
        $i++;
        $j++;
    ?>
<?php endwhile; endif; ?>

所以这样做是在所有帖子中绘制并根据Wordpress格式化它们。当每个帖子循环时,我为每个帖子创建2个输入框,一个带有增量变量的post id,另一个用增量变量存储上面输入框的值。我正在制作产品概述,因此我需要能够访问正确的帖子并使用JSON发送。

我坚持的部分是获得点击的正确帖子类型。

到目前为止,这是我的JQuery代码:

<script type="text/javascript">
$(function () {
    $('.item-post a').each(function (i) {
        $(this).on("click", function (e) {
            alert(i);

            var num = $('#hiddenpostitle').val();
            alert(num);

            var prodname = $('#hiddenpostitle' + num /* + (i+1)*/).val();

            $.post('overviewcheck-515adfzx8522', {'ProdName': prodname}, function (response) { }, 'json');
        });
    });
    $('.item-post a').colorbox({ opacity: 0.3, href: "../overviewa512454dzdtfa" });
});
</script>   

这不能正常工作,因为它总是会给我第一篇帖子,因为我没有收到被点击的相关产品。

示例:假设您单击3并且1是第一个,即使您单击2或3或4,也将始终获得1.

我真的很困难,需要帮助。不确定如何继续。

圣诞快乐!

更新:

正在使用的新代码

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="post-id-holder">
      <?php get_template_part('content',get_post_format()); ?>
      <div class="post-id-data" post-id="<?php echo get_the_ID(); ?>" post-title="something"></div>
      </div>                        

    <?php endwhile; endif; ?>
<script type="text/javascript">
(document).ready(function() {
   $('.item-post a').click(function(){
    // find the article for the post
    var article  = $(this).parentsUntil('article').parent();
    var post_id = article.attr("id");
    var post_title $('.entry-title a',article).text();
    alert(post_id);
    alert(post_title);


    $.post('overviewcheck-515adfzx8522', 
    { 
    'ProdName': prodname

    },
    function(response) {
    },
    'json'
    );


   $('.item-post a').colorbox({opacity:0.3, href:"../overviewa512454dzdtfa"});
   });
});

解答:

谢谢马特! :)

这是代码,所以如果你碰到这个,你可以使用它!

Wordpress查询部分:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="post-id-holder">
 <?php get_template_part('content',get_post_format()); ?>
  <div class="post-id-data" post-id="<?php echo get_the_ID(); ?>" post-title="something">      </div> 
 </div>                     

<?php endwhile; endif; ?>

JQuery Side:

<script type="text/javascript">
$(document).ready(function() {
 $('.item-post a').click(function(){
    // find the article for the post
        var article  = $(this).parentsUntil('article').parent();
    var post_id = article.attr("id");
    var post_title = $('.entry-title a',article).text();



        $.post('overviewcheck-515adfzx8522', 
                                        { 
        'ProdName': post_title

                                        },
         function(response) {
                                        },
         'json'
        );



       });
    $('.item-post a').colorbox({opacity:0.3, href:"../overviewa512454dzdtfa"});
});

</script>

再次感谢大家!圣诞节快乐!

2 个答案:

答案 0 :(得分:1)

可能不是您问题的答案,但首先您应该从此处删除each部分

$('.item-post a').each(function (i) {
    $(this).on("click", function (e){
        //...
    });
});

应该是

$('.item-post a').on("click", function (e){
    //...
});

您应该在每个活动之外注册您的活动,不需要循环,jQuery将会这样做。您还使用以下代码

$.post('overviewcheck-515adfzx8522', {'ProdName': prodname}, function (response) { 

}, 'json');

在这种情况下,第一个参数看起来不像有效url,并且回调函数根本不执行任何操作,因此您应该修复它们。

答案 1 :(得分:1)

如果您不创建表单,则根本不需要使用输入标记。如果您的代码在表单块中执行,那么它只会导致问题。如果您只想在javascript时间发现post-id,那么最好将其填充到div或span标签的属性中。

<?php while(have_posts()): ?>
<?php the_post(); ?>
<div class="post-id-holder">
    <?php get_template_part('content',get_post_format()); ?>
    <div class="post-id-data" post-id="<?php echo get_the_ID(); ?>" post-title="something"></div>
</div>
<?php endwhile; ?>

稍后您可以通过javascript访问它。

<script type="text/javascript">
$(document).ready(function() {
   $('.item-post a').click(function(){
      // where are we? we are at any link inside the post, and that's no good.

      // find the holder parent
      var holder = $(this).parentsUntil('.post-id-holder');
      var data = $(".post-id-data",holder);

      var post_id = data.attr("post-id");
      var post_title = data.attr("post-title");
   });
});
</script>

编辑:

在审核HTML后,我认为您可以获取帖子ID和标题,而无需向模板添加任何内容。

<script type="text/javascript">
$(document).ready(function() {
   $('.item-post a').click(function(){
      // find the article for the post
      var article  = $(this).parentsUntil('article').parent();
      var post_id = article.attr("id");
      var post_title $('.entry-title a',article).text();
      alert(post_id);
      alert(post_title);
   });
});
</script>