单击按钮时显示数据库中的 Wordpress 数据库自定义表行列值

Question

我在 WordPress 数据库中添加了一个自定义表。除此之外，我还创建了一个短代码，以便能够将其附加到我的 WordPress 网站上的特定页面。表格有两列，ID 和 coupon_code。

自定义表用于存储优惠券代码，我需要能够在按钮的点击事件中显示该表的第一行列值（coupon_code = INSERT NUMBER）。

function coupon_codes() {
 ?>
    <button class="reveal_coupon" onclick="reveal_coupon()">CLICK TO REVEAL 
COUPON CODE</button>
    <div class="coupon"></div>
      <?php
        global $wpdb;
        $result = $wpdb->get_results ( "SELECT * FROM coupon_codes LIMIT 1" 
        );
        foreach ( $result as $print )   {
          echo $print->coupon_code;
        }
}
add_shortcode( 'coupon_codes' , 'coupon_codes' );

我明白，为了实现这一点，我需要将 PHP 代码移动到一个单独的 PHP 文件中，因为此代码仅在服务器端运行，并且只有在单击事件上运行文件才能实现.那部分我明白了。

除非通过单击事件调用，否则我无法显示行值。这就是为什么我认为 JS / jQuery 适用于这种情况，但我无法准确地找出脚本以使其工作。

Answer 1

您似乎对 PHP 和 HTML/JS/CSS 的交互方式存在误解。

如果您在单击按钮之前无法显示行值（我假设您有 <button class="reveal_coupon"... 元素），那么您在这里几乎是在正确的轨道上。假设您的 <div class="coupon"></div> 优惠券专门用于保存从您的 PHP 脚本输出的优惠券数据，我将做一些观察：

• 你在echocoupondiv 之外在处理你的数据，所以无论你输出什么都不一定受制于你实现的 CSS 样式和 JS 逻辑对于这个元素。在<div class="coupon"> 和</div> 之间移动PHP 代码。

• 为了实现您想要的功能，您需要添加相关的 JavaScript 和 CSS 样式。最易于维护的方法是将您的 JS 和 CSS 分解为单独的文件，并在新的函数/enqueue 挂钩对中利用 wp_enqueue_script 和 wp_enqueue_style 函数在适当的时间在 DOM 中插入对这些文件的引用：

  add_action ( 'wp_enqueue_scripts', 'coupon_enqueue_scripts' );
  function coupon_enqueue_scripts() {
      wp_enqueue_script("coupon", "coupon.js");
  }
  
  add_action ( 'wp_enqueue_styles', 'coupon_enqueue_styles' );
  function coupon_enqueue_styles() {
      wp_enqueue_style("coupon", "coupon.css");
  }
  

  在这些文件中，您需要添加 (a) Javascript 逻辑来实现当前 HTML 输出中引用的 reveal_coupon() 函数，以及 (b) CSS 样式以最初隐藏优惠券代码。