如何从按钮获取帖子ID并将标题传递给莫代尔

时间:2018-08-03 作者:Remco

    <div><?php echo wp_get_attachment_image($image_upload,$size = \'full\');?><br/>
      <span class="name"><?php echo $title ?></span><span class="jobtitle"><?php echo $jobtitle ?></span>
      <a onclick="return moreinfoModal(this);" id="<?php get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal" href="javascript:void(0);" class="info">more info</a>
    </div>


    <div id="moreinfo-modal" role="dialog">
          <div class="teammember_div">
            <a id="close-moreinfo" onclick=\'return closeMoreInfoModal();\' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg"></a>
            <?php echo wp_get_attachment_image($image_upload,$size = \'full\');?>
            <p><?php echo $title ?></p>
            <p><?php echo $about ?></p>
            <span class="jobtitle"><?php echo $jobtitle ?></span>

            <span id="moreinfo" style="display: inherit;"></span>
            <a id="modal-join" class="btn-cta" href="/sign-up/">Become a Member!</a>
          </div>
        </div>

    <?php }?>
    </div>
    </div>
我正在显示4张卡片,上面有姓名和职务,还有一个打开模式的按钮。一旦用户单击按钮,就会打开一个模式,其中包含图像、标题、关于位等。。。

遗憾的是,我只能用一篇帖子的细节打开一个模态。如果有意义的话,我想将模态内容与卡片的内容相匹配。

Socard=哈里·莫达尔=哈里

<script> function moreinfoModal(field) {
        console.log(field.id);
        $(\'#moreinfo-modal\').toggleClass(\'open\');
    }


    function closeMoreInfoModal() {
        $(\'#moreinfo-modal\').toggleClass(\'open\');
    }

    $(document).on(\'click\', \'.close-pill\', function(e) {
        $(this).parent().remove();
        e.preventDefault();
    });
    </script>
你知道我在这里遗漏了什么吗?

1 个回复
最合适的回答,由SO网友:Nilesh Sanura 整理而成

当我们单击按钮在模型中显示post数据时,我们必须为特定模型目标提供带有数据属性的post id。

请在anchor tag和main div tag id中的数据目标中添加帖子id。

我已在此处修改了您的代码:

<div><?php echo wp_get_attachment_image($image_upload,$size = \'full\');?><br/>
  <span class="name"><?php echo $title; ?></span><span class="jobtitle"><?php echo $jobtitle; ?></span>
  <a onclick="return moreinfoModal(this);" id="<?php echo get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal-<?php echo get_the_ID();?>" href="javascript:void(0);" class="info">more info</a>
</div>


<div id="moreinfo-modal-<?php echo get_the_ID();?>" class= "moreinfo-modal" role="dialog">
      <div class="teammember_div">
        <a id="close-moreinfo" onclick=\'return closeMoreInfoModal();\' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg"></a>
        <?php echo wp_get_attachment_image($image_upload,$size = \'full\');?>
        <p><?php echo $title ?></p>
        <p><?php echo $about ?></p>
        <span class="jobtitle"><?php echo $jobtitle ?></span>

        <span id="moreinfo" style="display: inherit;"></span>
        <a id="modal-join" class="btn-cta" href="/sign-up/">Become a Member!</a>
      </div>
    </div>

<?php }?>
</div>
</div>
您还可以通过单击class而不是div ID attribute来更改js代码,如:

<script> function moreinfoModal(field) {
        console.log(field.id);
        $(\'.moreinfo-modal\').toggleClass(\'open\');
    }


    function closeMoreInfoModal() {
        $(\'.moreinfo-modal\').toggleClass(\'open\');
    }

    $(document).on(\'click\', \'.close-pill\', function(e) {
        $(this).parent().remove();
        e.preventDefault();
    });
    </script>
希望这能解决您的问题。:)

结束

相关推荐

尝试为POST_TYPE创建可在站点范围内引用的PHP变量

我有几个网站,其中包含我创建的几个定制PHP小部件循环。我想在其他区域和站点中重用这些小部件,但使用不同的自定义帖子类型。每个小部件PHP文件中唯一独特的是post类型拉取(在下面的代码段中,它是post):$home\\u carousel\\u query=新建WP\\u query(\'post\\u type=post&;posts\\u per\\u page=-1&;订单=ASC);while($home\\u carousel\\u query->have\\u posts