除非我使用 PHP 包含在頭標簽中，否則單獨的 JS 腳本不適用於 jQuery

Question

我是一名從事 PHP OOP CRUD 項目的初學者，我必須根據下拉菜單中的選擇動態更改表單。 所以我試圖為此使用 jQuery 。

這就是我在“scripts/script.js”中的內容：

    $(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function() {
            var optionValue = $(this).attr("value");
            if(optionValue) {
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else {
                $(".box").hide();
            }
        });
    }).change();
});

這是帶有表單和下拉列表的頁面的代碼

<?php
//Include the Class Autoloader
include("includes/class-autoload.inc.php");
//Get database (DBConnect) connection
$database = new DBConnect();
$db = $database->connect();

//Pass connection to objects
$product = new Product($db);


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Add</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/stylesheet.css">
    
    <!--jQuery-->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="scripts/script.js"></script>
    <script><?php include("scripts/script.js"); ?></script>
</head>
<body>
    
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <h1>Product Add</h1>
                <ul class="navbar-right">
                    <li><button>Save</button></li>
                    <li><button><a href="index.php">Cancel</a></button></li>
                </ul>
            </div>
        </nav>
    </header>

    <div class="container-fluid">
        <div class="product-add">
            <form action="<?php echo $_SERVER["PHP_SELF"] ?>" method="POST">
                <label>SKU</label>
                <input type="text" name="sku">
                <div class="error">
                    <?php echo $errors["sku"]?? ""?> 
                </div>

                <label>Name</label>
                <input type="text" name="name">
                <div class="error">
                    <?php echo $errors["name"]?? ""?> 
                </div>

                <label>Price ($)</label>
                <input type="text" name="price">
                <div class="error">
                    <?php echo $errors["price"]?? ""?> 
                </div>

                <div>
                <label>Product Type</label>
                    <select style="width:182px" id="productSelect">
                        <option>Please click to choose</option>
                        <option value="dvd">DVD</option>
                        <option value="book">Book</option>
                        <option value="furniture">Furniture</option>
                    </select>
                </div>
                <div class="error">
                    <?php echo $errors["type"]?? ""?> 
                </div>

                <div class = "dvd box">
                    <label for="">Size (MB)</label>
                    <input type="text" name="dvd">
                    <p>Please provide storage size in MB format.</p>
                </div>

                <div class = "furniture box">
                    <ul style="list-style-type:none" name="furniture">
                        <li>
                            <label for="">Height (CM)</label>
                            <input type="text" name="height">
                        </li>

                        <li>
                            <label for="">Width (CM)</label>
                            <input type="text" name="width">
                        </li>

                        <li>
                            <label for="">Length (CM)</label>
                            <input type="text" name="length">
                        </li>
                    </ul>
                    <p>Please provide dimensions in HxWxL format.</p>
                </div>

                <div class = "book box">
                    <label for="">Weight (KG)</label>
                    <input type="text" name="book">
                    <p>Please provide weight in KG.</p>
                </div>
            </form>
        </div>
    </div>

    <?php include("templates/footer.php"); ?>

</html>

我的問題是頭部標簽中的以下部分：

<head>
    ...
    <!--jQuery-->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="scripts/script.js"></script>

</head>

如果我像上面的例子那樣寫下來，那么“scripts/script.js”中的腳本根本不會加載。

但是，如果我添加以下代碼，它就會開始工作。

<script><?php include("scripts/script.js"); ?></script>

這是正確的方法還是我應該在沒有 PHP 的情況下調整它，在 Head Tag 中包含 function？

編輯如果我不使用 PHP 包含代碼，那么它會顯示包含所有產品類型的 div 的表單。

不含 PHP 包括

如果我添加 PHP 包含代碼，那么它會正確隱藏所有 div 並在您從下拉菜單中選擇時顯示特定的 div。

含 PHP 包括

Answer 1

在之前發布您的腳本標簽 1 行：

...
        <script src="scripts/script.js"></script>
    </body>
</html>

Answer 2

出於某種原因，如果我將文件夾和文件從“scripts/script.js”目錄重命名為“script/script.js”或“scripts/（任何替代文件名）.js”，問題就會得到解決

除非我使用 PHP 包含在頭標簽中，否則單獨的 JS 腳本不適用於 jQuery

問題描述

2 個解決方案

解決方案1
0 2021-02-19 11:52:21

解決方案2
0 已采納 2021-02-19 15:11:11

除非我使用 PHP 包含在頭標簽中，否則單獨的 JS 腳本不適用於 jQuery

問題描述

2 個解決方案

解決方案1 0 2021-02-19 11:52:21

解決方案2 0 已采納 2021-02-19 15:11:11

解決方案1
0 2021-02-19 11:52:21

解決方案2
0 已采納 2021-02-19 15:11:11