我需要將 Font Awesome 圖示更改為靜態影像。圖示用作顯示/隱藏文本的按鈕。我試圖添加一個作業片段，但它無法正常運行 - 可能是因為這正在呼叫 FontAwesome - 所以這里是正常運行的網站和下面的代碼：http: //puredentalcentre.co.uk/about.html
（我以前從未使用過 Javascript，也沒有構建此站點 - 我只需要進行此更改。使用我的基本 HTML/CSS 知識，我嘗試了更改，但它們導致顯示/隱藏按鈕不再起作用！）
這是當前的 Javascript：
const elements = document.querySelectorAll(".profile");
elements.forEach((e => {
let l = e.querySelector(".profile button"),
t = e.querySelector(".profile button i");
var r = e.lastElementChild,
c = document.querySelectorAll(".profile .profile-desc");
l.addEventListener("click", (() => {
c.forEach((e => {
let l = e.parentElement.querySelector("button i");
r !== e && (e.classList.add("hideText"), l.className = "far fa-plus-circle")
})), r.classList.toggle("hideText"), "far fa-plus-circle" === t.className ? t.className = "far fa-minus-circle" : t.className = "far fa-plus-circle"
}))
}));
這是當前 HTML 呼叫按鈕的方式：
<!-- Glenn Teuchmann -->
<div class="profile" id="glenn">
<div class="profile-img-section">
<div class="profile-img">
<picture>
<source type="image/webp"
srcset="img/pdc_profile_gt_1600.webp 1600w,
img/pdc_profile_gt_1000.webp 1000w,
img/pdc_profile_gt_800.webp 800w,
img/pdc_profile_gt_640.webp 640w,
img/pdc_profile_gt_500.webp 500w,
img/pdc_profile_gt_320.webp 320w"
sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img
srcset="img/pdc_profile_gt_1600.jpg 1600w,
img/pdc_profile_gt_1000.jpg 1000w,
img/pdc_profile_gt_800.jpg 800w,
img/pdc_profile_gt_640.jpg 640w,
img/pdc_profile_gt_500.jpg 500w,
img/pdc_profile_gt_320.jpg 320w"
sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw"
src="img/pdc_profile_gt_320.png"
alt="Glenn Teuchmann">
</picture>
</div><!-- profile img -->
<div class="profile-header">
<div class="profile-title">
<h4>Glenn Teuchmann</h4>
<p class="reg-no">GDC Reg № 265402</p>
</div><!-- profile title -->
<button><i class="far fa-plus-circle"></i></button>
</div><!-- profile header -->
</div><!-- profile img section -->
<div class="profile-desc hideText">
<p>Glenn qualified from Peninsula College of Medicine and Dentistry in 2016. Since graduating, he has gained a wide range of experience in all areas of general dentistry, while attaining a Postgraduate diploma in restorative dentistry.</p>
</div><!-- profile desc -->
這是我的嘗試，但它只會導致plus-circle_250px.png無法點擊的顯示，因此文本不會像原始代碼中那樣顯示：
var path = "img/"
var pathEls=document.querySelectorAll(".profile");
elements.forEach((e=>{
let l=e.querySelector(".profile button"),
t=e.querySelector(".profile button img");
var r=e.lastElementChild,
c=document.querySelectorAll(".profile .profile-desc");
l.addEventListener("click",(()=>{
c.forEach((e=>{
let l=e.parentElement.querySelector("button img");
r!==e&&(e.classList.add("hideText"),l.className="plus-circle_250px.png")})),r.classList.toggle("hideText"),"plus-circle_250px.png"===t.className?t.className="minus-circle_250px.png":t.className="plus-circle_250px.png"}))}));
HTML
<!-- Glenn Teuchmann -->
<div class="profile" id="glenn">
<div class="profile-img-section">
<div class="profile-img">
<picture>
<source type="image/webp"
srcset="img/pdc_profile_gt_1600.webp 1600w,
img/pdc_profile_gt_1000.webp 1000w,
img/pdc_profile_gt_800.webp 800w,
img/pdc_profile_gt_640.webp 640w,
img/pdc_profile_gt_500.webp 500w,
img/pdc_profile_gt_320.webp 320w"
sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img
srcset="img/pdc_profile_gt_1600.jpg 1600w,
img/pdc_profile_gt_1000.jpg 1000w,
img/pdc_profile_gt_800.jpg 800w,
img/pdc_profile_gt_640.jpg 640w,
img/pdc_profile_gt_500.jpg 500w,
img/pdc_profile_gt_320.jpg 320w"
sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw"
src="img/pdc_profile_gt_320.png"
alt="Glenn Teuchmann">
</picture>
</div><!-- profile img -->
<div class="profile-header">
<div class="profile-title">
<h4>Glenn Teuchmann</h4>
<p class="reg-no">GDC Reg № 265402</p>
</div><!-- profile title -->
<button><img src="img/plus-circle_250px.png" height="25px"></button>
</div><!-- profile header -->
</div><!-- profile img section -->
<div class="profile-desc hideText">
<p>Glenn qualified from Peninsula College of Medicine and Dentistry in 2016. Since graduating, he has gained a wide range of experience in all areas of general dentistry, while attaining a Postgraduate diploma in restorative dentistry.</p>
</div><!-- profile desc -->
</div><!-- profile -->
How do I swap out the far fa-plus-circle and far fa-minus-circle for my two replacement images plus-circle_250px.png and minus-circle_250px.png?
uj5u.com熱心網友回復：
嘗試使用以下代碼段：
const elements = document.querySelectorAll(".profile");
elements.forEach((e=>{
let l = e.querySelector(".profile button")
, t = e.querySelector(".profile button img");
var r = e.lastElementChild
, c = document.querySelectorAll(".profile .profile-desc");
l.addEventListener("click", (()=>{
c.forEach((e=>{
let l = e.parentElement.querySelector("button img");
r !== e && (e.classList.add("hideText"),
l.src = "img/plus-circle_250px.png")
}
)),
r.classList.toggle("hideText"),
"img/plus-circle_250px.png" === t.getAttribute('src') ? t.src = "img/minus-circle_250px.png" : t.src = "img/plus-circle_250px.png"
}
))
}
));
const elements = document.querySelectorAll(".profile");
elements.forEach((e=>{
let l = e.querySelector(".profile button")
, t = e.querySelector(".profile button img");
var r = e.lastElementChild
, c = document.querySelectorAll(".profile .profile-desc");
l.addEventListener("click", (()=>{
c.forEach((e=>{
let l = e.parentElement.querySelector("button img");
r !== e && (e.classList.add("hideText"),
l.src = "img/plus-circle_250px.png")
}
)),
r.classList.toggle("hideText"),
"img/plus-circle_250px.png" === t.getAttribute('src') ? t.src = "img/minus-circle_250px.png" : t.src = "img/plus-circle_250px.png"
}
))
}
));.profile-grid {
grid-column: span 12;
display: grid;
grid-template-columns: 1fr;
column-gap: .75rem;
row-gap: 1.5rem;
align-items: stretch
}
@media screen and (min-width: 23.5em) {
.profile-grid {
grid-template-columns:repeat(12, 1fr);
column-gap: 1rem;
row-gap: 2rem
}
}
@media screen and (min-width: 48em) {
.profile-grid {
grid-template-columns:repeat(4, 1fr);
column-gap: 1.5rem;
row-gap: 3rem
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid {
grid-template-columns:repeat(6, 1fr);
column-gap: 2rem;
row-gap: 4rem
}
}
.profile-grid .profile {
grid-column: span 1;
overflow: hidden;
background-color: #fff;
z-index: 0
}
@media screen and (min-width: 23.5em) {
.profile-grid .profile {
grid-column:2/12
}
}
@media screen and (min-width: 48em) {
.profile-grid .profile {
grid-column:span 2
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile {
grid-column:span 2
}
}
@media screen and (min-width: 48em) {
.profile-grid .profile:last-child:nth-child(2n-1) {
grid-column:2/4
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile:last-child:nth-child(2n-1) {
grid-column:span 2
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile:last-child:nth-child(3n-2) {
grid-column:3/5
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile:nth-last-child(2):nth-child(3n-2) {
grid-column:2/4
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile:last-child:nth-child(3n-1) {
grid-column:4/6
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile#glenn {
grid-column:2/4
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile#deepa {
grid-column:4/6
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile#jonny {
grid-column:2/4
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile#simon {
grid-column:4/6
}
}
.profile-grid .profile .profile-img-section {
width: 100%;
position: relative;
padding-bottom: 100%;
overflow: hidden;
z-index: 1
}
.profile-grid .profile .profile-img-section .profile-img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 0
}
.profile-grid .profile .profile-img-section .profile-img picture {
width: 100%;
height: 100%
}
.profile-grid .profile .profile-img-section .profile-img picture img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%
}
.profile-grid .profile .profile-img-section .profile-header {
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(255,255,255,.9)
}
.profile-grid .profile .profile-img-section .profile-header .profile-title h4 {
color: #222
}
.profile-grid .profile .profile-img-section .profile-header .profile-title p {
font-weight: 500
}
.profile-grid .profile .profile-img-section .profile-header button {
border: none;
outline: none;
background: none;
cursor: pointer;
font-size: 1.5rem
}
.profile-grid .profile .profile-desc {
background-color: rgba(255,255,255,.9);
transform: translateY(0);
transition: transform .3s ease;
z-index: -1;
overflow: hidden
}
.profile-grid .profile .profile-desc.hideText {
transform: translateY(-100%);
height: 0
}<div class="profile-grid">
<!-- Glenn Teuchmann -->
<div class="profile" id="glenn">
<div class="profile-img-section">
<div class="profile-img">
<picture>
<source type="image/webp" srcset="img/pdc_profile_gt_1600.webp 1600w,
img/pdc_profile_gt_1000.webp 1000w,
img/pdc_profile_gt_800.webp 800w,
img/pdc_profile_gt_640.webp 640w,
img/pdc_profile_gt_500.webp 500w,
img/pdc_profile_gt_320.webp 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img srcset="img/pdc_profile_gt_1600.jpg 1600w,
img/pdc_profile_gt_1000.jpg 1000w,
img/pdc_profile_gt_800.jpg 800w,
img/pdc_profile_gt_640.jpg 640w,
img/pdc_profile_gt_500.jpg 500w,
img/pdc_profile_gt_320.jpg 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw" src="img/pdc_profile_gt_320.png" alt="Glenn Teuchmann">
</picture>
</div>
<!-- profile img -->
<div class="profile-header">
<div class="profile-title">
<h4>Glenn Teuchmann</h4>
<p class="reg-no">GDC Reg № 265402</p>
</div>
<!-- profile title -->
<button><img src="img/plus-circle_250px.png"></button>
</div>
<!-- profile header -->
</div>
<!-- profile img section -->
<div class="profile-desc hideText">
<p>Glenn qualified from Peninsula College of Medicine and Dentistry in 2016. Since graduating, he has gained a wide range of experience in all areas of general dentistry, while attaining a Postgraduate diploma in restorative dentistry.</p>
<p>Glenn provides all general dental treatments including tooth whitening and enjoys working with adhesive tooth-coloured fillings to create natural, healthy, confident smiles. Having a background in health care Glenn takes a holistic approach to dentistry and enjoys building long lasting relationships with his patients.</p>
<p>Having grown up in North Devon, Glenn enjoys most things that involve being active and outdoors including surfing, walking, rugby (Chiefs fan) and skiing.</p>
</div>
<!-- profile desc -->
</div>
<!-- profile -->
<!-- Deepa Shah -->
<div class="profile" id="deepa">
<div class="profile-img-section">
<div class="profile-img">
<picture>
<source type="image/webp" srcset="img/pdc_profile_ds_1600.webp 1600w,
img/pdc_profile_ds_1000.webp 1000w,
img/pdc_profile_ds_800.webp 800w,
img/pdc_profile_ds_640.webp 640w,
img/pdc_profile_ds_500.webp 500w,
img/pdc_profile_ds_320.webp 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img srcset="img/pdc_profile_ds_1600.jpg 1600w,
img/pdc_profile_ds_1000.jpg 1000w,
img/pdc_profile_ds_800.jpg 800w,
img/pdc_profile_ds_640.jpg 640w,
img/pdc_profile_ds_500.jpg 500w,
img/pdc_profile_ds_320.jpg 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw" src="img/pdc_profile_ds_320.png" alt="Deepa Shah">
</picture>
</div>
<div class="profile-header">
<div class="profile-title">
<h4>Deepa Shah</h4>
<p class="reg-no">GDC Reg № 85976</p>
</div>
<button><img src="img/plus-circle_250px.png"></button>
</div>
</div>
<div class="profile-desc hideText">
<p>Deepa qualified in 2005 from Guy’s, King’s and St Thomas’ Dental Institute in London, and has 15 years of experience working within general practice and specialist prosthodontic practice. She has completed various postgraduate courses and training to stay at the forefront of clinical dentistry. Deepa has acquired a Masters’ in Conservative Dentistry from the Eastman Dental Institute, London. She is a Member of The Faculty of Dental Surgery of the Royal College of Surgeons of England and is a visiting lecturer at the Eastman Dental Institute for postgraduate students.</p>
<p>Deepa’s clinical interests lie within the fields of minimally invasive/adhesive dentistry, prosthodontics (crowns/bridges/dentures), implant dentistry and cosmetic dentistry. She particularly enjoys providing treatment solutions for complex cases including extensive tooth wear and broken down dentitions. Her philosophy: “preventive, aesthetic and functional dentistry, respecting what nature has provided”.</p>
<p>Deepa moved to North Devon in 2018 following her love of the surf and seeking a relaxed outdoor lifestyle by the sea. Away from work you’ll find her in the waves, or out exploring this beautiful part of the world.</p>
</div>
</div>
<!-- Jonny Lynd -->
<div class="profile" id="jonny">
<div class="profile-img-section">
<div class="profile-img">
<picture>
<source type="image/webp" srcset="img/pdc_profile_jl_1600.webp 1600w,
img/pdc_profile_jl_1000.webp 1000w,
img/pdc_profile_jl_800.webp 800w,
img/pdc_profile_jl_640.webp 640w,
img/pdc_profile_jl_500.webp 500w,
img/pdc_profile_jl_320.webp 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img srcset="img/pdc_profile_jl_1600.jpg 1600w,
img/pdc_profile_jl_1000.jpg 1000w,
img/pdc_profile_jl_800.jpg 800w,
img/pdc_profile_jl_640.jpg 640w,
img/pdc_profile_jl_500.jpg 500w,
img/pdc_profile_jl_320.jpg 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw" src="img/pdc_profile_jl_320.png" alt="Jonny Lynd">
</picture>
</div>
<div class="profile-header">
<div class="profile-title">
<h4>Jonny Lynd</h4>
<p class="reg-no">GDC Reg № 85992</p>
</div>
<button><img src="img/plus-circle_250px.png"></button>
</div>
</div>
<div class="profile-desc hideText">
<p>Jonny graduated from Birmingham university in 2005 with the prize in conservative dentistry. During the next 10 years he became increasingly interested in Implant Dentistry. His involvement in this field continued to grow after discovering the huge positive impact implant treatment can make to patient lives. In 2018 he completed an MSc in Dental Implantology with distinction at Edgehill University.</p>
<p>Jonny is married with 3 young sons, in his spare time Jonny enjoys kitesurfing, surfing, Skiing and cycling.</p>
</div>
</div>
<!-- Simon Flynn -->
<div class="profile" id="simon">
<div class="profile-img-section">
<div class="profile-img">
<picture>
<source type="image/webp" srcset="img/pdc_profile_sf_1600.webp 1600w,
img/pdc_profile_sf_1000.webp 1000w,
img/pdc_profile_sf_800.webp 800w,
img/pdc_profile_sf_640.webp 640w,
img/pdc_profile_sf_500.webp 500w,
img/pdc_profile_sf_320.webp 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img srcset="img/pdc_profile_sf_1600.jpg 1600w,
img/pdc_profile_sf_1000.jpg 1000w,
img/pdc_profile_sf_800.jpg 800w,
img/pdc_profile_sf_640.jpg 640w,
img/pdc_profile_sf_500.jpg 500w,
img/pdc_profile_sf_320.jpg 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw" src="img/pdc_profile_sf_320.png" alt="Simon Flynn">
</picture>
</div>
<div class="profile-header">
<div class="profile-title">
<h4>Simon Flynn</h4>
<p class="reg-no">GDC Reg № 61987</p>
</div>
<button><img src="img/plus-circle_250px.png"></button>
</div>
</div>
<div class="profile-desc hideText">
<p>Simon qualified from Guys (University of London) in 1986 and has 31 years of experience in general dental practice.,including running a very successful multi surgery practice in North Devon. His professional interests are whole patient care with a particular interest in cosmetic dentistry with special reference to crown and bridgework. Married with two grown up children, away from work his interests include water skiing, snow skiing and enjoying the outdoor life which North Devon offers.</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
一點幫助 ：-）
var path = "https://i.stack.imgur.com/";
var profileEls = document.querySelectorAll(".profile");
for (let profileEl of profileEls) {
profileEl.addEventListener("click", function () {
var imgEl = this.querySelector("button img");
if (imgEl.src.split("/").pop() === "f3oC3.png") {
imgEl.src = path "BUncn.png";
} else {
imgEl.src = path "f3oC3.png";
}
});
}<div class="profile">
<button><img height="30"
src="https://i.stack.imgur.com/f3oC3.png"
></button>
</div>
<div class="profile">
<button><img height="30"
src="https://i.stack.imgur.com/f3oC3.png"
></button>
</div>
<div class="profile">
<button><img height="30"
src="https://i.stack.imgur.com/f3oC3.png"
></button>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410637.html
標籤：