修改代码以从li获取textContent，而不是从img src获取缩略图

Question

我发现(并调整了(下面的代码，它是为了将较大的img src与列表中的缩略图src进行切换而设计的，但我不知道如何调整它以使用类似https://picsum.photos/id/CLICKED_LI_textContent/200/200作为URL，而不是从缩略图的src中提取。

为了了解更多的上下文，这是我调查这件事的原始帖子如何从(非图像(项目列表更改img src？

我没有学习过任何JS类，所以我不确定脚本的每个组件是如何工作的。我对纯HTML和CSS更满意，但我认为JS是让这项工作更顺利的答案。

(我确实为此在文档中添加了jquery脚本src(

对不起，代码有点难看，我本来会添加脚本和样式标签之类的，但我在发布这个时没有时间了

$("#list li").click(function(e) {
// if i use this getting undefined
// var src = $(this).attr("src"); 
// so i use this method
var target = e.target;
var src = target.src;
console.log(src);
$("#display").fadeOut(function() {
$(this).on('load', function() {
$(this).fadeIn();
});
$(this).attr("src", src);
});
//record which thumb was clicked
$("#list li").removeClass("active"); //remove class
$(this).addClass("active"); //apply class to selected thumb
});
//move next
$("#left-arrow").click(function() {
if ($("#list li.active").next("#list li").length > 0) {
$("#list li.active").next().children( 'img' ).trigger("click");
} else {
$("#list li:first > img").trigger("click"); //go to first
}
return false;
});
//move previous 
$("#right-arrow").click(function() {
if ($("#list li.active").prev("#list li").length > 0) {
$("#list li.active").prev().children( 'img' ).trigger("click");
} else {
$("#list li:last > img").trigger("click"); //go to end
}
return false;
});
//click the first thumb to begin
$("#list li:first > img").trigger("click");
.container {
display: flex;
}
.active {
border-bottom: 1px solid #990000;
}
.list {
width: 200px;
cursor: pointer;
padding: 0.25rem;
}
list > li * {
/* so only the li tag can be event.target, and none of it's children */
pointer-events: none;
}
.display {
max-width: 500px;
max-height: 500px;
}
<div class="container">
<div class="list">
<ul id="list">
<li>237</li>
<li>240</li>
<li>100</li>
<li>301</li>
</ul>
<a href="#" id="left-arrow">$larr;</a> &nbsp; <a href="#" id="right-arrow">$rarr;</a>
</div>
<div class="show">
<img src="https://picsum.photos/id/237/200/200" class="display" id="display">
</div>
</div>

Answer 1

这里是一个纯javascript解决方案。唯一的区别是它没有图像之间的褪色。

我试着用变量作为解释，尽可能地用教学法编写代码。该代码更多地使用您的原始线程，在那里您有一堆具有不同文件结尾的图像。我为图像赋予了alt属性，因此您可以看到更改。

简短解释：

1. 对图像使用数组
2. 使用数组通过javascript创建列表
3. 将点击监听器添加到您的#list，在那里您可以阅读.textContent。我将pointer-events: none;添加到li标记的任何子项中，这样它们就不会触发点击侦听器
4. 将click监听器添加到上一个/下一个按钮，在那里检查当前可见图像在数组中的索引(imageArr中从0到3(，然后将+1 och-1添加到该索引

[edit]添加了用于更新CSS的代码。

const listEl = document.getElementById('list');
const imgElement = document.querySelector('.right > img');
let imageArr = ["237.jpg", "240.gif", "100.jpeg", "301.png"];   // 1
let currentImage = '';
document.getElementById('next').addEventListener('click', () => shiftImage(1));
document.getElementById('prev').addEventListener('click', () => shiftImage(-1));
listEl.addEventListener('click', displayImage);
function updateImage(imageName) {
const subfolder = 'images/';
changeActive(imageName, currentImage);  /* ADDED in EDIT */
currentImage = imageName;
imgElement.src = subfolder + imageName;
imgElement.alt = imageName;
}
/* ADDED in EDIT */
function changeActive(newImage, oldImage) {
if (oldImage) {
let oldIndex = imageArr.indexOf(oldImage);
toggleActiveClass(oldIndex);
}

let currentIndex = imageArr.indexOf(newImage);  
toggleActiveClass(currentIndex);
}
/* ADDED in EDIT */
function toggleActiveClass(imageIndex) {
let liElements = listEl.childNodes;
liElements[imageIndex].classList.toggle('active');
}
function shiftImage(direction) {
let currentIndex = imageArr.indexOf(currentImage);
let newIndex = currentIndex + direction;

if      (newIndex < 0)                { newIndex = imageArr.length - 1; }
else if (newIndex >= imageArr.length) { newIndex = 0; }
let newImageName = imageArr[newIndex];

updateImage(newImageName);
}
function displayImage(event) {
let liElement = event.target;
updateImage(liElement.textContent);
}
function constructImageLinks() {    // 2
let htmlOutput = '';

for (let imageSrc of imageArr) {
htmlOutput += `<li>${imageSrc}</li>`;
}

listEl.innerHTML = htmlOutput;
}
constructImageLinks();
updateImage(imageArr[0]);

section {
display: flex;
}
section ul {
margin-top: 0px;
}
section > .left li {
cursor: pointer;
padding: 0.25rem;
}
section > .left li.active {
background-color: pink;
}
section > .left li > * {
pointer-events: none;
}
section > div {
padding: 1rem;
}
section > .right > img {
width: 200px;
border: 1px solid;
padding: 0.5rem;
}

<section>
<div class="left">
<ul id="list"></ul>
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>
<div class="right">
<img>
</div>
</section>

Answer 2

JSFiddle-链接

HTML

<div class="container">
<div class="list">
<ul id="list">
<li>237</li>
<li>240</li>
<li>100</li>
<li>301</li>
</ul>
<a href="#" id="left-arrow">$larr;</a> &nbsp; <a href="#" id="right-arrow">$rarr;</a>
</div>
<div class="show">
<img src="https://picsum.photos/id/240/200/200" class="display" id="display">
</div>
</div>

Javascript

// HELPER FUNCTIONS
function getImageURL(id, width=200, height=200){
return "https://picsum.photos/id/"+ id + "/" + width + "/" + height;
}
function removeActive(){
let lis = $('#list li');
for(let i=0;i<lis.length;i++){
$(lis[i]).removeClass('active');
}
}
// HANDLE EVENTS
$(document).on('click', "#list li", async (e)=>{
await $('#display').fadeOut();    
removeActive();
let li = $(e.target);
li.addClass('active');
let image_id = parseInt($(e.target).html());
let image_url = getImageURL(image_id);
$('#display').attr('src', image_url);
await $('#display').fadeIn();
});
//move next
$(document).on('click', "#left-arrow", (e)=>{
// Handler Here
});
//move previous 
$(document).on('click', "#right-arrow", (e)=>{
// Handler Here
});

CSS

.active {
border-bottom: 1px solid #990000;
}
.list {
width: 200px;
cursor: pointer;
padding: 0.25rem;
}
list > li * {
/* so only the li tag can be event.target, and none of it's children */
pointer-events: none;
}
.display {
max-width: 500px;
max-height: 500px;
}
.container {
display: flex;
}