javascript - 单击按钮时显示数据库中的 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> coupon 专门用于保存 PHP 脚本输出的优惠券数据，我将做一些观察:

• 你是echo在您的coupon之外获取您的数据div ，因此无论您输出什么，都不一定会受到您为此元素实现的 CSS 样式和 JS 逻辑的影响。将 PHP 代码移至 <div class="coupon"> 之间和</div> .

• 为了实现您想要的功能，您需要添加相关的 JavaScript 和 CSS 样式。最可维护的方法是将 JS 和 CSS 分解为单独的文件并利用 wp_enqueue_script 和 wp_enqueue_style 新函数中的函数/enqueue Hook 对以在适当的时间在 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 逻辑来实现 reveal_coupon()当前 HTML 输出中引用的函数，以及 (b) CSS 样式以最初隐藏优惠券代码。