單擊按鈕時顯示數據庫中的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文件中，因為此代碼僅在服務器端運行，並且只有在click事件上運行文件時才能實現。 我理解的那部分。

除非使用click事件調用，否則無法顯示行值。 這就是為什么我認為JS / jQuery在這種情況下可以工作的原因，但是我無法准確地找出使腳本起作用的腳本。

Answer 1

您似乎對PHP和HTML / JS / CSS的交互方式有誤解。

如果在單擊按鈕之前無法顯示行值（我假設您具有<button class="reveal_coupon"...元素），那么您在這里幾乎是正確的。 假設您的<div class="coupon"></div>優惠券專門用於保存PHP腳本輸出的優惠券數據，我將做一些觀察：

• 您正在echo coupon div 之外的數據，因此您輸出的任何內容都不一定要遵循為此元素所要求的CSS樣式和JS邏輯。 在<div class="coupon">和</div>之間移動PHP代碼。

• 為了實現所需的功能，您需要添加相關的JavaScript和CSS樣式。 最可維護的方法是將JS和CSS分解為單獨的文件，並在新的函數/ 排隊掛鈎對中利用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樣式以初始隱藏優惠券代碼。