【发布时间】：2022-01-12 19:34:06
【问题描述】：
我需要将 Font Awesome 图标更改为静态图像。图标用作显示/隐藏文本的按钮。我尝试添加一个有效的 sn-p，但它无法正常运行 - 可能是因为这正在调用 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 -->
如何将far fa-plus-circle 和far fa-minus-circle 替换为我的两个替换图像plus-circle_250px.png 和minus-circle_250px.png？
【问题讨论】：
-
JavaScript 和 Java 是两种完全不同的编程语言
-
为了提供适当的帮助，我希望看到以
div class='profile'开头的 HTML 结构 - 部分是为了更好地理解，但主要是因为您拥有的 javascript 函数看起来有点臃肿和混乱，而且可能任何答案都需要简化它。 -
您能否添加工作示例 sn-p，并包含您尝试查看代码中失败的内容？
-
@prettyInPink 抱歉，我只是尝试添加 sn-p 但它无法正常工作，所以如果可以的话，我已经链接了工作网页？我真的对Javascript没有任何了解，但我已经把我的尝试放在了上面。
-
@EllieWilkinson，原因是 js sn-p 是针对那些图标的，如果被替换就会中断。因此，您需要更新您共享的 js sn-p。下面的答案就是这样做的，你试过了吗？
标签： javascript html jquery font-awesome show-hide