WordPress中多次展示不同随机购买提示消息的问题求助

问题出在哪 #

你的代码里，PHP函数generate_fake_message()在页面渲染时只执行一次，生成的消息被直接硬编码进JS代码中。所以不管调用多少次showMessage()，JS里的message变量都是同一个固定值，自然会重复显示同一条消息。

两种修复方案 #

方案1：PHP预生成所有随机消息，传给JS #

在服务器端提前生成5条不同的随机消息，存成数组后传给JS循环使用：

function fake_buy_messages(){
    show_fake_buy_messages();
}
add_action('wp_footer', 'fake_buy_messages');

function generate_fake_message(){
    $names = array("John", "Emma", "Michael", "Sophia", "William");
    $products = array("Product A", "Product B", "Product C");
    $name = $names[array_rand($names)];
    $product = $products[array_rand($products)];
    return "$name bought $product";
}

function show_fake_buy_messages() {
    // 预生成5条随机消息
    $messages = [];
    for ($i = 0; $i < 5; $i++) {
        $messages[] = generate_fake_message();
    }
    // 转成JS可识别的格式
    $js_messages = json_encode($messages);
    ?>
    <script>
    jQuery(document).ready(function($) {
        const messages = <?php echo $js_messages; ?>;
        let messageIndex = 0;

        function showMessage() {
            if (messageIndex >= messages.length) return;
            const message = messages[messageIndex];
            messageIndex++;
            
            const messageElement = $('<div class="fake-message"></div>').text(message);
            messageElement.css({
                'position': 'fixed',
                'bottom': '20px',
                'left': '20px',
                'background': '#f0f0f0',
                'padding': '10px',
                'border-radius': '5px',
                'z-index': 9999 // 避免被其他元素遮挡
            });
            $('body').append(messageElement);
            setTimeout(function() {
                messageElement.fadeOut(1000, function() {
                    $(this).remove();
                });
            }, 3000);
        }

        // 每隔10秒显示一条消息
        for (let i = 0; i < 5; i++) {
            setTimeout(showMessage, i * 10000);
        }    
    });
    </script>
    <?php
}
?>

方案2：在JS端生成随机消息 #

把名字和产品列表从PHP传给JS，让JS每次调用时都重新随机组合生成消息：

function fake_buy_messages(){
    show_fake_buy_messages();
}
add_action('wp_footer', 'fake_buy_messages');

function show_fake_buy_messages() {
    $names = json_encode(array("John", "Emma", "Michael", "Sophia", "William"));
    $products = json_encode(array("Product A", "Product B", "Product C"));
    ?>
    <script>
    jQuery(document).ready(function($) {
        const names = <?php echo $names; ?>;
        const products = <?php echo $products; ?>;

        // JS端生成随机消息
        function generateRandomMessage() {
            const randomName = names[Math.floor(Math.random() * names.length)];
            const randomProduct = products[Math.floor(Math.random() * products.length)];
            return `${randomName} bought ${randomProduct}`;
        }

        function showMessage() {
            const message = generateRandomMessage();
            const messageElement = $('<div class="fake-message"></div>').text(message);
            messageElement.css({
                'position': 'fixed',
                'bottom': '20px',
                'left': '20px',
                'background': '#f0f0f0',
                'padding': '10px',
                'border-radius': '5px',
                'z-index': 9999
            });
            $('body').append(messageElement);
            setTimeout(function() {
                messageElement.fadeOut(1000, function() {
                    $(this).remove();
                });
            }, 3000);
        }

        for (let i = 0; i < 5; i++) {
            setTimeout(showMessage, i * 10000);
        }    
    });
    </script>
    <?php
}
?>

额外优化提示 #

• 添加z-index确保消息显示在页面最上层，不会被其他元素挡住
• 可以给消息添加滑入/滑出动画，提升视觉体验
• 如果要完全避免重复消息，方案1中可以在生成数组时加入去重逻辑

内容的提问来源于stack exchange，提问作者maxteprov7