jquery 使用bootstap后javascript功能丢失

在我将bootstrap链接到html文件之前，按钮工作正常。2我得到了"uncaughttypeerror无法读取属性addeventlistener"的错误。3在链接到 Bootstrap 后。4我通过链接jQuery和使用$查看了以前的建议后修复了这个错误（文档）.准备就绪（）方法。有三个按钮。第一个是改变颜色。第二个是切换列表。最后一个是做乘法。除了第二个按钮外，第一个和第三个按钮都可以工作。styleidercss保存在一个单独的文件中。
代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My Page</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"   rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    
    <link rel="stylesheet" href="style.css">
</head>
<div class="container">
    <div class="row">

        <body>
            
            <div id="col1" class="col-md-4">
                <p>Lorem Ipsum</p>
                <button id="change-color">Change Color</button>
            </div>
            <div id="col2" class="col-md-4">
                <ul id="colorlist">
                    <li>Red</li>
                    <li>Green</li>
                </ul>
                <ul id="animalist">
                    <li>dog</li>
                    <li>cat</li>
                </ul>
                <button type="button" id="switch-list">Switch</button>
                
            </div>
            <div class="col-md-4">
                <input id="value1" type="text" value="5">
                <input id="value2" type="text" value="6">
                <button id="multiply">Multiply</button>
                <hr>
                <!--empty paragraph-->
                <p id="result"></p>
            </div>
            <hr>
            <div class="col-md-12">
                <table>
                    <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                        <th>Col3</th>
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </div>
    </div>
</div>

<script>

    var btnSwitch = document.body.children[1].children[2];
    var colorlist = document.body.children[1].children[0];
    var animallist = document.body.children[1].children[1];
    
    
    $(document).ready(function () {
        btnSwitch.addEventListener("click", function (e) {
            if (colorlist.style.display != "none") { // If #colorlist is displayed
                colorlist.style.display = "none";    //        Hide #colorlist
                animallist.style.display = "block";    //        Show #animallist
            } else {                                                             //   Else
                animallist.style.display = "none";    //        Hide #animallist
                colorlist.style.display = "block";   //        Show #colorlist
            }
        });

    });

    $(document).ready(function () {
        var btnChange = document.getElementById("change-color");
        btnChange.addEventListener("click", function (e) {
            var col1 = document.getElementById("col1");
            switch (col1.style.color) {
                case "red":
                    col1.style.color = "green";
                    break;
                case "green":
                    col1.style.color = "blue";
                    break;
                case "blue":
                    col1.style.color = "black";
                    break;
                case "black":
                    col1.style.color = "purple";
                    break;
                default:
                    col1.style.color = "red";
                    break;

            }
        });
    });

    var btnMultiply = document.getElementById("multiply");
    var inputValue1 = document.getElementById("value1");
    var inputValue2 = document.getElementById("value2");

    btnMultiply.addEventListener('click', function (e) {
        var val1 = inputValue1.value;
        var val2 = inputValue2.value;
        if (isNaN(val1) || isNaN(val2)) {
            //replace alert box with DOM manipulation
            //alert("At least one of the values is not a number");
            result.innerHTML = "one or both of the input values is invalid";
            result.style.color = "red";
        } else {
            //alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
            result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
            result.style.color = "green";
        }

            });   

    function validateNumber() {
        if (isNaN(this.value)) {
            this.style.border = "2px solid red";
        } else {
            this.style.border = "";
        }

    }

    inputValue1.addEventListener("keyup", validateNumber)

    inputValue2.addEventListener("keyup", validateNumber)
</script>
</body>

</html>

I appreciate your feedback.

Thanks



I used $(documnent).ready() to fix 2 errors out of three. I couldn't solve the third error by using the same method.

在您的代码片段中，您只加载了Bootstrap的CSS，这 * 应该 * 不会干扰您的JQuery。我不知道是什么 * 导致了 * 您的问题，但我猜您在HTML结构中做了一些更改，这干扰了您设置返回页面元素的方式：

var btnSwitch = document.body.children[1].children[2];

用这种方法选择元素的危险在于，HTML中的一个小改动就可能破坏它。除非你特别想针对给定元素的子元素或父元素，否则更好的方法是使用：

var btnSwitch = document.getElementById('switch-list')

阅读代码也会容易得多!因为您已经在代码的其他部分使用了getElementById()，所以我假设您知道它是如何工作的。
继续。
你在代码中使用了两次$(document).ready(function () { ... })。这应该不是问题，但是如果第一个ready()方法抛出错误，第二个块将不执行。所以如果没有特别的需要，只声明一次。如果你正在使用var s *，那么在（无名的）函数中定义它。
您的HTML中也有一个错误，在开放的<body>标记之前有div元素，但这可能发生在您复制问题中的代码时。

- 固定示例**

一个二个一个一个

jquery 使用bootstap后javascript功能丢失

1条答案

相关问题

热门标签

最新问答