为什么JavaScript代码不会在内容产品wordpress中循环

Question

in content-product.php

i have products as auction and i want show in shop page countdown timer when auction end

i write script code for countdown timer

but the script show for one product not loop for all products

<?php
    date_default_timezone_set("Europe/Oslo");
    $auctionstatus = get_post_meta( $product->get_id(), 'mp_auction_status', true );
    $clientt_tz = date("Y-m-d H:i:s");
    $auctio_time_1= $_product_meta['auction_stop_time'][0];
    if ($auctionstatus == "enabled") {
        if ($auctio_time_1 >= $clientt_tz ){
    echo  "Auction end at ";

    $js_code =<<<JS
    <script language="JavaScript">
    TargetDate = "$auctio_time_1";
    ForeColor = "#009fe3";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%D%% D, %%H%% T, %%M%% M, %%S%% S.";
    FinishMessage = "It is finally here!";
    </script>
    <script language="JavaScript" src="https://scripts.hashemian.com/js/countdown.js"></script>
    JS;

    echo "<br>", $js_code;

        }
        else {
            echo  "Auction end " ;

        }



    } ?>

Answer 1

There are two basic reasons:

1. You are using global variables which will be shared between instances of the script
2. The script generates an element with a hard-coded ID. An ID must be unique in a document. Each instance of the script calls getElementById and finds the first matching element.

I'd rewrite this so the data was initialised from data-* attributes on the <script> element and it used the last script element in the document to identify where to insert the span (which it would keep a reference to instead of searching with gEBId each time).

<p>First</p>
<script data-number=5>
  (function() {
    const scripts = document.querySelectorAll("script");
    const script = scripts[scripts.length - 1];
    const span = document.createElement('span');
    script.parentNode.insertBefore(span, script);
    span.textContent = script.dataset.number;
    setTimeout(update, 1000);
    function update() {
        let num = parseInt(span.textContent, 10);
        num--;
        span.textContent = num;
        if (num > 0) {
            setTimeout(update, 1000);
        }
    }
  }());
</script>


<p>Second</p>
<script data-number=3>
  (function() {
    const scripts = document.querySelectorAll("script");
    const script = scripts[scripts.length - 1];
    const span = document.createElement('span');
    script.parentNode.insertBefore(span, script);
    span.textContent = script.dataset.number;
    setTimeout(update, 1000);
    function update() {
        let num = parseInt(span.textContent, 10);
        num--;
        span.textContent = num;
        if (num > 0) {
            setTimeout(update, 1000);
        }
    }
  }());
</script>

</div>