僅在滿足php條件時運行javascript

Question

如果僅滿足php條件，如何運行javascript？ 我試圖僅在$page_count為<= 1時顯示彈出窗口。 php很好，可以正常運行，因為我已經用簡單的回聲測試了它，只有在$page_count超過2的情況下，當我嘗試取消運行javascript時，它仍然可以運行。

有一種通用的方法可以做到這一點嗎？

if ($page_count <= 1) {
    $setup_popup =
    '<div id="status-popup">
        <div id="status-popup-container" class="total-center">
            <a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
        </div>
    </div>'
    ;
}
else {
    $setup_popup = NULL;
}

Java腳本

$('#status-popup').fadeIn(350);

$('[data-popup-close]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('#status-popup').fadeOut(350);
    $('body').css('overflow', 'auto');
     e.preventDefault();
});

Answer 1

正如評論者所建議的那樣，一些簡單的事情如下：

if(document.getElementById('status-popup')){
    $('#status-popup').fadeIn(350);

    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('#status-popup').fadeOut(350);
        $('body').css('overflow', 'auto');
         e.preventDefault();
    });
}

應該這樣做。

如果需要，您還可以將JavaScript包含在PHP if語句中：

<?php
if ($page_count <= 1) {
?>
        $('#status-popup').fadeIn(350);

        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('#status-popup').fadeOut(350);
            $('body').css('overflow', 'auto');
             e.preventDefault();
        });
<?php
}
?>

Answer 2

我將始終添加模態元素，但包括計數器並讓JS進行邏輯處理：

<script type="application/javascript">
var pageCounter = <?php $page_count ?>;
if (pageCounter) {
  $('#status-popup').fadeIn(350);

  $('[data-popup-close]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('#status-popup').fadeOut(350);
    $('body').css('overflow', 'auto');
     e.preventDefault();
  });
}
</script>
<div id="status-popup">
  <div id="status-popup-container" class="total-center">
    <a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
  </div>
</div>

沒什么大不了的，幾乎沒有什么復雜性，您可以從客戶端和服務器上更改或測試值（這允許進行單元測試，AJAX等小事情）。

Answer 3

PHP代碼由服務器執行，然后將其結果傳輸給客戶端，因此您可以這樣做：

if ($page_count <= 1) {
    $setup_popup = "";
    if ($page_count >=2 ) {
        $setup_popup .= "<script type="text/javascript">[put your js code here]</script>";
    }
    $setup_popup .= '<div id="status-popup">
        <div id="status-popup-container" class="total-center">
            <a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
        </div>
    </div>';
}
else {
    $setup_popup = NULL;
}

Answer 4

var page_count = <?= $page_count ?>;

if(page_count <= 1) {
    $('#status-popup').fadeIn(350);
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('#status-popup').fadeOut(350);
        $('body').css('overflow', 'auto');
         e.preventDefault();
    });
}

您不需要使用else條件，因為僅當頁面數少於2時才顯示彈出窗口。希望它起作用。