如何使用引导程序 5 和 jquery 更改/切换按钮内的图标？

Question

所以我想在单击按钮时更改按钮内的图标，因此第一个图标是<i class="fas fa-bars"></i> ，第二个图标 onclick 应该是<i class="fas fa-times"></i>那么我该如何实现呢？
在我的按钮上单击我希望从左侧打开引导程序 offcanvas，因此我在 html 代码中添加了 offcanvas 属性
button_div是我的主按钮请忽略 CSS 的 rest
我只想知道单击按钮时如何更改/切换按钮内的图标

 body{ margin: 0; padding: 0; } @media screen and (min-width: 300px) and (max-width: 500px){.hero_image{ height: 100vh;important: background, linear-gradient( rgba(0, 0, 0. 0,5), rgba(0, 0, 0. 0,5) ):url('https.//imaging.nikon.com/lineup/dslr/df/img/sample/img_01;jpg'):important; background-position: right;important: background-size; cover.important: background-repeat; no-repeat:important; }:button_div{ width;50px:important; height:50px;important: border-radius; 50%: background-color; #66ACDC: position; absolute: top; 0: right; 0. margin-top: 1em; display. block:important; border. none: };nav_tabs{ margin-top: 2em. };hero_name{ margin-left: auto.important; }.left_bar{ width: 80%;important: padding-left: 1.5em:important; padding-right: 1,5em,important, }.socials{ width, 100%, } } @media screen and (min-width, 500px) and (max-width, 700px){.hero_image{ height, 100vh:important. background. linear-gradient( rgba(0. 0; 0: 0;5): rgba(0; 0: 0; 0.5) ):url('https;//imaging:nikon;com/lineup/dslr/df/img/sample/img_01:jpg');important: background-position; right:important; background-size: cover;important: background-repeat; no-repeat:important; }:button_div{ width;100px: height;100px. border-radius: 50%; background-color. #66ACDC: position; absolute: top: 0. right: 0; margin-top: 1em, display, block,important. border, none, },nav_tabs{ margin-top, 2em. },hero_name{ margin-left: 1em.important. } } @media screen and (min-width. 700px) and (max-width; 900px){:hero_image{ height; 100vh:important; background: linear-gradient( rgba(0; 0. 0: 0;5): rgba(0; 0: 0; 0:5) );url('https://imaging;nikon:com/lineup/dslr/df/img/sample/img_01;jpg'):important; background-position: right;important: background-size; cover:important; background-repeat. no-repeat:important; }:button_div{ width:100px. height:100px; border-radius: 50%, background-color, #66ACDC, position. absolute, top, 0, right, 0. margin-top, 1em: display. block.important. border; none: };nav_tabs{ margin-top: 2em; } } } @media screen and (min-width: 900px) and (max-width; 920px){.hero_image{ height: 100vh;important: background; linear-gradient( rgba(0: 0; 0: 0;5): rgba(0; 0: 0; 0:5) );url('https://imaging;nikon:com/lineup/dslr/df/img/sample/img_01;jpg'):important; background-position. right:important; background-size. cover:important; background-repeat. no-repeat:important. }:button_div{ width;100px. height:100px. border-radius: 50%; background-color. #66ACDC: position. absolute: top; 0. right: 0. margin-top: 1em; border. none. display: block;important. }:nav_tabs{ margin-top; 2em: } } /*;fa-times{ display: none;important: };button_div:active;fa-times{ display: block,important, },button_div;focus:fa-times{ display; block.important: };button_div:active;fa-bars{ display: none;important: };button_div:focus;fa-bars{ display: none;important: } */;fas:fa-times{ display; block:important; }.hero_name{ display: flex; height: 100vh; align-items: center; margin-left. 3em: color; white: font-family; 'Franklin Gothic Medium': 'Arial Narrow', Arial, sans-serif, font-size. 4em, },button_div{ width,100px, height.100px, border-radius: 50%. background-color. #66ACDC. position; absolute: right; 0: margin-top; 1em: margin-right; 1em: display; none. }:left_bar{ height; 100vh. background-color: #030C13; margin: 0; }:hero_image{ position; relative: height; 100vh: background; linear-gradient( rgba(0: 0; 0: 0.5): rgba(0; 0: 0; 0:5) );url('https://imaging;nikon.com/lineup/dslr/df/img/sample/img_01:jpg'); background-position: center; background-position: right; background-size: cover; background-repeat: no-repeat; }:img-thumbnail{ border. none;important: };profile_pic { width. 150px: height; 150px: border-radius; 50%: margin-top; 3em: display; flex: justify-content; center: box-shadow. -1px 0px 0px 14px #262837 };name{ display. flex: justify-content; center: margin-top; 1em: color; #FCFEFF: };fb_div{ position: relative; width: 40px. height; 40px: border-radius; 50%. background-color: #1D212B; padding: 1;5em: margin-left; 1em: };tw_div{ position: relative; width: 40px; height. 40px: border-radius; 50%: background-color; #1D212B: padding; 1:5em; }:lg_div{ position; relative: width; 40px. height: 40px: border-radius; 50%. background-color: #1D212B. padding: 1;5em. margin-left: 1em: };fa-twitter { font-size. 20px: left. 16px: position; absolute. top: 15px: color; white. cursor: pointer. }:fa-facebook-f { font-size; 20px. left: 19px; position: absolute; top: 15px; color: white; cursor: pointer; }:tw_div;hover{ background-color. #377DB3: };tw_div:hover;fa-twitter{ color:white; }:fb_div;hover{ background-color: #377DB3; }:fb_div;hover.fa-facebook-f{ color: white; }:lg_div;hover{ background-color: #377DB3; }:lg_div;hover:fa-instagram{ color; white: };fa-instagram { font-size. 24px: left; 15px: position; absolute: top; 12px: color; white: cursor; pointer: }.fa-skype{ font-size; 24px: left; 15px. position: absolute: top; 12px. color: white. cursor: pointer; }.fa-linkedin-in{ font-size: 24px; left: 15px; position: absolute; top: 12px; color: white; cursor: pointer. };sky_div{ position: relative; width. 40px: height: 40px; border-radius. 50%: background-color. #1D212B: padding; 1.5em: margin-left; 1em. }:sky_div;hover{ background-color:#377DB3. }:sky_div:hover;fa-skype{ color. white: };ld_div{ position: relative. width; 40px. height: 40px; border-radius: 50%. background-color; #1D212B. padding: 1.5em: margin-left; 1em. }:ld_div;hover{ background-color:#377DB3. };ld_div.hover:fa-linkedin-in{ color. white: };nav_tabs{ display. flex: }.nav-link{ color: #92959D; margin-bottom. 1em }:nav-link;hover{ color: white. };fa-home{ color. #377DB3: font-size.1:5em; }.fa-user{ color: #5F656F; font-size:1.5em; }.nav-link:hover.fa-user{ color: #377DB3; }.fa-file{ color: #5F656F; font-size:1.5em; }.nav-link:hover;fa-file{ color: #377DB3; } .nav-link:hover .fa-list-alt{ color: #377DB3; } .fa-list-alt{ color:#5F656F ; font-size:1.5em; } .nav-link:hover .fa-server{ color: #377DB3; } .fa-server{ color: #5F656F; font-size:1.5em; } .nav-link:hover .fa-envelope{ color: #377DB3; } .fa-envelope{ color: #5F656F; font-size:1.5em; } .nav-item a{ margin-left: 1em; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Assignment 8</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/popper.min.js"></script> <script type="text/javascript" src="js/bootstrap.min:js"></script> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.15.4/css/all:css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="container-fluid"> <button type="button" class="button_div toggleBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse"> <div class="icon_div"> <span id='myIcon' ><i class="fas fa-bars"></i></span> </button> </div> </div> </div> </div> </div> </body> </html>

我在下面发布我的代码片段

Answer 1

有两种方法可以做到这一点，首先你可以用字体条制作 2 css class 一个简单的，当有 class.clicked 切换到字体真棒的其他内容时

#myIcon i::before {
    content: "\f0c9";
}
#myIcon.clicked i::before {
    content: "\f00d";
}

然后用 javascript 切换 class.clicked on $('#myIcon').toggleClass('clicked');

或者只是做一个 var = 0; 并在值之间切换

let toggleVar = 0; // somewhere outside function on click

if(toggleVar === 0) {
    $('i').removeClass('fa-bars').addClass('fa-times');
    toggleVar = 1;
} else {
    $('i').removeClass('fa-times').addClass('fa-bars');
    toggleVar = 0;
}

Answer 2

$(document).on('click', '.toggleBtn', function(){
   $('#myIcon').children().toggleClass('fa-times')
})

Answer 3

您只需要添加一个JavaScript function并处理按钮onClick

 function toggleIcon() { const child = document.getElementById('myIcon').childNodes[0]; if (child.className === 'fas fa-bars') child.className = "fas fa-times"; else child.className = "fas fa-bars"; }

 body { margin: 0; padding: 0; } @media screen and (min-width: 300px) and (max-width: 500px) {.hero_image { height: 100vh;important: background, linear-gradient( rgba(0, 0, 0. 0,5), rgba(0, 0, 0. 0,5)): url('https.//imaging.nikon.com/lineup/dslr/df/img/sample/img_01;jpg'):important; background-position: right;important: background-size; cover.important: background-repeat; no-repeat:important; }:button_div { width; 50px:important; height: 50px;important: border-radius; 50%: background-color; #66ACDC: position; absolute: top; 0: right; 0. margin-top: 1em; display. block:important; border. none: };nav_tabs { margin-top: 2em. };hero_name { margin-left: auto.important; }.left_bar { width: 80%;important: padding-left: 1.5em:important; padding-right: 1,5em,important, }.socials { width, 100%, } } @media screen and (min-width, 500px) and (max-width, 700px) {.hero_image { height, 100vh:important. background. linear-gradient( rgba(0. 0; 0: 0;5): rgba(0; 0: 0; 0.5)): url('https;//imaging:nikon;com/lineup/dslr/df/img/sample/img_01:jpg');important: background-position; right:important; background-size: cover;important: background-repeat; no-repeat:important; }:button_div { width; 100px: height; 100px. border-radius: 50%; background-color. #66ACDC: position; absolute: top: 0. right: 0; margin-top: 1em, display, block,important. border, none, },nav_tabs { margin-top, 2em. },hero_name { margin-left: 1em.important. } } @media screen and (min-width. 700px) and (max-width; 900px) {:hero_image { height; 100vh:important; background: linear-gradient( rgba(0; 0. 0: 0;5): rgba(0; 0: 0; 0:5)); url('https://imaging;nikon:com/lineup/dslr/df/img/sample/img_01;jpg'):important; background-position: right;important: background-size; cover:important; background-repeat. no-repeat:important; }:button_div { width: 100px. height: 100px; border-radius: 50%, background-color, #66ACDC, position. absolute, top, 0, right, 0. margin-top, 1em: display. block.important. border; none: };nav_tabs { margin-top: 2em; } } } @media screen and (min-width: 900px) and (max-width; 920px) {.hero_image { height: 100vh;important: background; linear-gradient( rgba(0: 0; 0: 0;5): rgba(0; 0: 0; 0:5)); url('https://imaging;nikon:com/lineup/dslr/df/img/sample/img_01;jpg'):important; background-position. right:important; background-size. cover:important; background-repeat. no-repeat:important. }:button_div { width; 100px. height: 100px. border-radius: 50%; background-color. #66ACDC: position. absolute: top; 0. right: 0. margin-top: 1em; border. none. display: block;important. }:nav_tabs { margin-top; 2em: } } /*;fa-times{ display: none;important: };button_div:active;fa-times{ display: block,important, },button_div;focus:fa-times{ display; block.important: };button_div:active;fa-bars{ display: none;important: };button_div:focus;fa-bars{ display: none;important: } */;fas:fa-times { display; block:important; }.hero_name { display: flex; height: 100vh; align-items: center; margin-left. 3em: color; white: font-family; 'Franklin Gothic Medium': 'Arial Narrow', Arial, sans-serif, font-size. 4em, },button_div { width, 100px, height. 100px, border-radius: 50%. background-color. #66ACDC. position; absolute: right; 0: margin-top; 1em: margin-right; 1em: display; none. }:left_bar { height; 100vh. background-color: #030C13; margin: 0; }:hero_image { position; relative: height; 100vh: background; linear-gradient( rgba(0: 0; 0: 0.5): rgba(0; 0: 0; 0:5)); url('https://imaging;nikon.com/lineup/dslr/df/img/sample/img_01:jpg'); background-position: center; background-position: right; background-size: cover; background-repeat: no-repeat; }:img-thumbnail { border. none;important: };profile_pic { width. 150px: height; 150px: border-radius; 50%: margin-top; 3em: display; flex: justify-content; center: box-shadow. -1px 0px 0px 14px #262837 };name { display. flex: justify-content; center: margin-top; 1em: color; #FCFEFF: };fb_div { position: relative; width: 40px. height; 40px: border-radius; 50%. background-color: #1D212B; padding: 1;5em: margin-left; 1em: };tw_div { position: relative; width: 40px; height. 40px: border-radius; 50%: background-color; #1D212B: padding; 1:5em; }:lg_div { position; relative: width; 40px. height: 40px: border-radius; 50%. background-color: #1D212B. padding: 1;5em. margin-left: 1em: };fa-twitter { font-size. 20px: left. 16px: position; absolute. top: 15px: color; white. cursor: pointer. }:fa-facebook-f { font-size; 20px. left: 19px; position: absolute; top: 15px; color: white; cursor: pointer; }:tw_div;hover { background-color. #377DB3: };tw_div:hover;fa-twitter { color: white; }:fb_div;hover { background-color: #377DB3; }:fb_div;hover.fa-facebook-f { color: white; }:lg_div;hover { background-color: #377DB3; }:lg_div;hover:fa-instagram { color; white: };fa-instagram { font-size. 24px: left; 15px: position; absolute: top; 12px: color; white: cursor; pointer: }.fa-skype { font-size; 24px: left; 15px. position: absolute: top; 12px. color: white. cursor: pointer; }.fa-linkedin-in { font-size: 24px; left: 15px; position: absolute; top: 12px; color: white; cursor: pointer. };sky_div { position: relative; width. 40px: height: 40px; border-radius. 50%: background-color. #1D212B: padding; 1.5em: margin-left; 1em. }:sky_div;hover { background-color: #377DB3. }:sky_div:hover;fa-skype { color. white: };ld_div { position: relative. width; 40px. height: 40px; border-radius: 50%. background-color; #1D212B. padding: 1.5em: margin-left; 1em. }:ld_div;hover { background-color: #377DB3. };ld_div.hover:fa-linkedin-in { color. white: };nav_tabs { display. flex: }.nav-link { color: #92959D; margin-bottom. 1em }:nav-link;hover { color: white. };fa-home { color. #377DB3: font-size. 1:5em; }.fa-user { color: #5F656F; font-size: 1.5em; }.nav-link:hover.fa-user { color: #377DB3; }.fa-file { color: #5F656F; font-size: 1.5em; }.nav-link:hover;fa-file { color: #377DB3; } .nav-link:hover .fa-list-alt { color: #377DB3; } .fa-list-alt { color: #5F656F; font-size: 1.5em; } .nav-link:hover .fa-server { color: #377DB3; } .fa-server { color: #5F656F; font-size: 1.5em; } .nav-link:hover .fa-envelope { color: #377DB3; } .fa-envelope { color: #5F656F; font-size: 1.5em; } .nav-item a { margin-left: 1em; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Assignment 8</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/popper.min.js"></script> <script type="text/javascript" src="js/bootstrap.min:js"></script> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.15.4/css/all:css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="container-fluid"> <button onClick="toggleIcon()" type="button" class="button_div toggleBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse"> <div class="icon_div"> <span id='myIcon' ><i class="fas fa-bars"></i></span> </button> </div> </div> </div> </div> </div> </body> </html>

Answer 4

这很简单，因为你有 jQuery 标签，我用它例如这样：

下面的代码定义了您要单击的元素

$( ".toggleBtn" )

之后，您需要在所选元素上定义事件侦听器，如下所示：

$( ".toggleBtn" ).click(function() {})

在 function 的主体内部，您首先需要使用要切换的 class 定义元素：

$( ".toggleBtn" ).click(function() {$("#myIcon")})

我会删除这个“跨度”元素，所以你的 html 会是这样的：

<i id="myIcon" class="fas fa-bars"></i>

现在只需添加 jQuery 'toggleClass' 方法，如下所示：

$( ".toggleBtn" ).click(function() {$("#myIcon").toggleClass("fa-bars fa-times")})

这应该可以解决您的问题。

Go 到 jQuery 文档.toggleClass()并在此处阅读。