在jQuery

时间:2018-11-12 15:52:17

标签: javascript jquery html

因此,我试图在单击它时切换一个超棒的字体图标(位于带有可折叠卡体的卡头处)。但是,当我单击按钮时,下面的卡体不会折叠,并且在浏览器控制台上出现错误。

错误:

Error: Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at a.t._getParent (collapse.js:300)
at new a (collapse.js:88)
at HTMLDivElement.<anonymous> (collapse.js:345)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.a._jQueryInterface [as collapse] (collapse.js:331)
at HTMLDivElement.<anonymous> (collapse.js:378)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at HTMLElement.<anonymous> (collapse.js:374)

崩溃.js:

const children = [].slice.call(parent.querySelectorAll(selector))
      $(children).each((i, element) => {
        this._addAriaAndCollapsedClass(
          Collapse._getTargetFromElement(element),
          [element]
        )
      })

我的header.php:

<!DOCTYPE html>
<html>
    <head>
        <title>Web System</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="script.js"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Aldrich|Raleway|Rosario" rel="stylesheet">
    </head>
    <body>

我的script.js:

$(document).ready(function() {
    $("i.fas, fa-plus").click(function() {
        $(this).toggleClass("fa-plus fa-minus");
    });
});

我的HTML结构:

<div class="col-8">
    <div class="card">
        <div class="card-header">
            <i class="fas fa-plus float-right" id="cardOne" data-toggle="collapse" data-target="#collapseFirst" aria-expanded="true" aria-controls="collapseFirst"></i>
                Change image
        </div>
        <div id="collapseFirst" class="collapse show" aria-labelledby="cardOne" data-parent="#accordion">
            <div class="card-body">
                <form action="menus.php" method="POST" enctype="multipart/form-data">
                    <input type="file" name="customAvatar" required>
                    <input type="submit" value="Salvar">
                </form>
            </div>
        </div>
    </div>
</div>

对不起,如果我在这个问题上犯了一些错误,这里很新;)

0 个答案:

没有答案