满足条件后如何更改 CSS 样式属性？ PHP、JS、CSS

Question

美好的一天！

在我的网页中显示弹出框时遇到困难。我想在它满足我的 php 代码中的某个条件时显示它，它位于Condition.php 下。我已经包含了 js 文件，它删除了某个类以使框可见。 Condition.php里面的JS代码满足一定条件怎么执行？

这是我的代码：

Condition.php

<?php
    // Defined variables and additional codes section
    if (strlen($str) == 4) {
        // Show the popup box
    }
    // Additional Codes
?>

ConfirmCheck.js

$(document).ready(function () {
    $('#confirm').click(function () {
        $('.popup').removeClass("hide");
    });
});

Check.php

<form class="frm" action="Condition.php" method="POST">
    // Additional Codes here
    <input type="submit" name="checkOutBtn" value="CONFIRM" id="confirm">
</form>

<?php include 'box.php';?>
<script src='ConfirmCheck.js'></script>

Box.php

<div class="popup hide" id="popupID">
    <div class="box">
            <div class="form">
                <h1>SUCCESS!</h1>
                <form action="home.php">
                    <div class="form-group">
                        <p class="paragraph">
                            Your order has been successfully placed!
                        </p>
                        <button class="homepageBtn" onclick="home.php">GO TO THE HOME PAGE</button>
                    </div>
                </form>
            </div>
        </div>
</div>

Answer 1

要执行您需要的操作，只需将if 条件放在box.php 中并删除condition.php，因为单个条件的整个PHP 页面没有任何意义。

box.php

<div class="popup <? if (strlen($str) != 4) { ?>hide<? } ?>" id="popupID">
  <div class="box">
    <div class="form">
      <h1>SUCCESS!</h1>
      <form action="home.php">
        <div class="form-group">
          <p class="paragraph">
            Your order has been successfully placed!
          </p>
          <button class="homepageBtn" onclick="home.php">GO TO THE HOME PAGE</button>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 2

我猜问题是您将表单的操作设置为Condition.php，但在check.php 上包含了框设计和代码。

请注意，#confirm 是提交类型的输入，因此在按下它后，它会将您重定向到表单操作中指定的页面。

我可以建议两种可能的解决方法：

1. [最少建议] 在Condition.php 页面上显示确认框
2. [最推荐]使用 AJAX！

第一个修复要求您将框的标记和样式移动到Condition.php 文件并设计一个完整的确认/发布操作页面

第二个修复更好，因为通过使用 AJAX 将数据发送到服务器，您不仅会留在同一页面上 (check.php)，而且您还可以将地址隐藏到 Condition.php，即应该是后端文件（据我了解）

结构应该是这样的：

check.php：

<div class="frm">
    // Additional Codes here
    <buttin name="checkOutBtn" id="confirm">CONFIRMM</button>
</form>

<?php include 'box.php';?>
<script src='ConfirmCheck.js'></script>

ConfirmCheck.js：

$(document).ready(function () {
    $('#confirm').click(function () {
        // code to get all of your fields and put them in a js object: FDATA
        $.ajax({type:'POST', url:'Condition.php', data: FDATA,
        success:function(){
             $('.popup').removeClass("hide");
        }});
    });
});

Condition.php：

<?php
    // Defined variables and additional codes section
    if (strlen($str) == 4) { //success
        echo "success message";
    }else{ // failed
        header('HTTP/1.0 400 Bad Request');
        die("bad request");
    }
    // Additional Codes
?>

请求在后台check.php 和Condition.php 之间来回传递，您的代码会通过回调通知是否显示该框。