仅在满足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时才显示弹出窗口。希望它起作用。