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

Posted 2023-05-08

【中文标题】满足条件后如何更改 CSS 样式属性？ PHP、JS、CSS

【英文标题】：How do I change a CSS Style attribute once a condition is met? PHP, JS, CSS

【发布时间】：2022-01-05 04:51:54

【问题描述】：

美好的一天！

在我的网页中显示弹出框时遇到困难。我想在它满足我的 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>

【问题讨论】：

您是否需要直接从 php 显示弹出窗口，或者您想在单击确认按钮但 php 中的某些条件为假时阻止弹出窗口？

@Stefino76 我想在单击按钮时显示弹出框，同时满足某个条件。

【参考方案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>

【讨论】：

是否也会删除 div 的隐藏类？

hide 类只会显示在页面中，然后strlen($str) 不是4。

嵌套条件语句是否也适用于该方法？

是的，因为这决定了是否应该添加 hide 类。它在上面示例的第一行

【参考方案2】：

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

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

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

[最少建议] 在Condition.php 页面上显示确认框 [最推荐]使用 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 之间来回传递，您的代码会通过回调通知是否显示该框。

【讨论】：

如果我选择第一个修复，我将只实现一个单独的网页而不是弹出框。我没听错吗？

是的。您实现它的方式也不会作为弹出窗口工作（php在服务器端执行，结果将最终发送到页面。您不使用php来制作您使用javascript的动态前端功能）。要使结果显示为弹出窗口，您需要保持在同一页面上，为此您需要在后台发送请求，并且您需要 Ajax（具有指定操作的表单将您带到另一个页面）@ChrisJay106跨度>