javascript - How to add jQuery code into HTML Page

Question

Welcome To Ask or Share your Answers For Others

javascript - How to add jQuery code into HTML Page

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

$(".icon-bg").click(function () {
    $(".btn").toggleClass("active");
    $(".icon-bg").toggleClass("active");
    $(".container").toggleClass("active");
    $(".box-upload").toggleClass("active");
    $(".box-caption").toggleClass("active");
    $(".box-tags").toggleClass("active");
    $(".private").toggleClass("active");
    $(".set-time-limit").toggleClass("active");
    $(".button").toggleClass("active");
});

$(".button").click(function () {
    $(".button-overlay").toggleClass("active");
});

$(".iconmelon").click(function () {
    $(".box-upload-ing").toggleClass("active");
    $(".iconmelon-loaded").toggleClass("active");
});

$(".private").click(function () {
    $(".private-overlay").addClass("active");
    $(".private-overlay-wave").addClass("active");
});

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

138 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T02:47:44+0000

1) Best practice is to make new javascript file like my.js. Make this file into your js folder in root directory -> js/my.js . 2) In my.js file add your code inside of $(document).ready(function(){}) scope.

$(document).ready(function(){
    $(".icon-bg").click(function () {
        $(".btn").toggleClass("active");
        $(".icon-bg").toggleClass("active");
        $(".container").toggleClass("active");
        $(".box-upload").toggleClass("active");
        $(".box-caption").toggleClass("active");
        $(".box-tags").toggleClass("active");
        $(".private").toggleClass("active");
        $(".set-time-limit").toggleClass("active");
        $(".button").toggleClass("active");
    });

    $(".button").click(function () {
        $(".button-overlay").toggleClass("active");
    });

    $(".iconmelon").click(function () {
        $(".box-upload-ing").toggleClass("active");
        $(".iconmelon-loaded").toggleClass("active");
    });

    $(".private").click(function () {
        $(".private-overlay").addClass("active");
        $(".private-overlay-wave").addClass("active");
    });
});

3) add your new js file into your html

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</head>

Categories

javascript - How to add jQuery code into HTML Page

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags