Javascript show/hide 按钮：将按钮图标从 FontAwesome 更改为图像

Question

我需要将 Font Awesome 图标更改为静态图像。这些图标用作 show/hide 文本的按钮。我试图添加一个工作片段，但它无法正常运行 - 可能是因为这是调用 FontAwesome - 所以这里是正常运行的网站和下面的代码：http://puredentalcentre.co.uk/about.html

（我以前从未使用过 Javascript 也没有构建此站点 - 我只需要进行此更改。使用我的基本 HTML/CSS 知识，我尝试过更改但结果是show/hide 按钮不再起作用！）

这是当前的 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 &numero; 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 &numero; 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 -->

如何将 far fa-plus-circle 和 far fa-minus-circle 换成我的两个替换图像 plus-circle_250px.png 和 minus-circle_250px.png？

Answer 1

一点帮助:-)

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>

Answer 2

尝试使用以下代码段：

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>

Javascript show/hide 按钮：将按钮图标从 FontAwesome 更改为图像

Javascript show/hide button: changing button icon from FontAwesome to image

javascript

html

jquery

font-awesome

show-hide