仅在满足 php 条件时运行 javascript答案

【问题标题】：Running javascript only if php condition is met仅在满足 php 条件时运行 javascript
【发布时间】：2016-12-01 18:33:53
【问题描述】：

如果只满足一个 php 条件，你如何运行 javascript？我试图仅在$page_count 是<= 1 时显示一个弹出窗口。 php 很好并且可以正常运行，因为我已经使用简单的 echo 对其进行了测试，只有当我尝试否定 javascript 的运行时，如果 $page_count 超过 2，它仍然可以运行。

有没有通用的方法来解决这个问题？

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;
}

Javascript

$('#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();
});

【问题讨论】：

为什么不直接将计数器作为变量传递，让 JS 决定呢？
页面没有status-popup，js怎么运行？
@ssube 不知道怎么做。
对不起大家，我使用了错误的 php 变量。您的解决方案确实对我有所帮助，因此对于给您带来的不便，我深表歉意。

标签： javascript php if-statement

【解决方案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
}
?>

【讨论】：

第一个解决方案没有帮助。我会尝试第二个。

【解决方案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 等小事情）。

【讨论】：

那么我是否只需将 pageCounter 条件设置为 =if (pageCounter =< 1) { ？
您可以将if (pageCounter) 更改为您想要的任何条件。
这个解决方案不会总是保留静态 html 吗？如果满足条件，我只希望 html 可见。

【解决方案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;
}

【讨论】：

【解决方案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 时显示弹出窗口。希望它有效。

【讨论】：