更改预览中的图片描述答案

【问题标题】：Changing the picture description in the preview更改预览中的图片描述
【发布时间】：2017-05-18 10:34:17
【问题描述】：

我目前正在为我在学校的项目创建一个图片库。我遇到了一个问题，我不知道如何添加只显示在大预览图片下方而不是顶部小图片旁边的图片描述。每张小图片都会有不同的描述。我自己尝试了一些东西，但失败得很惨，我对这一切还是陌生的:)

有解决这个问题的办法吗？

<head>
    <title>Gallery</title>
    <link href="galery.css" rel="stylesheet" type="text/css">
</head>

<body background="cosmic.jpg">
  <div class="gallery" align="center">



    <div class="smallpics">
<img onclick="getElementById('bigpic').src=this.src" id="picture1" src="images/picture1.png"  /> 
<img onclick="getElementById('bigpic').src=this.src" id="picture2" src="images/picture2.png"  /> 
<img onclick="getElementById('bigpic').src=this.src" id="picture3" src="images/picture3.png"  /> 
<img onclick="getElementById('bigpic').src=this.src" id="picture4" src="images/picture4.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture5" src="images/picture5.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture6" src="images/picture6.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture7" src="images/picture7.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture8" src="images/picture8.png"  />
<img onclick="getElementById('bigpic').src=this.src" id="picture9" src="images/picture9.png"  />
</div>

     <div class="bigpic" align="center">
   <img id="bigpic" src="images/picture1.png" alt="" />

</div>

【问题讨论】：

您应该考虑从外部 JS 文件集中处理事件。这有很多好处，其中最重要的是它会从您的 HTML 中删除大量重复的 onclick 代码。

标签： javascript html css

【解决方案1】：

<div class="smallpics">
   <img onclick="getElementById('bigpic').src=this.src; getElementById('bigpicDesc').innerHTML(this.alt) " id="picture1" src="images/picture1.png" alt="The Description" /> 
....
</div>

<div class="bigpic" align="center">
   <img id="bigpic" src="images/picture1.png" alt="" />
   <div id="bigpicDesc"> </div>

</div>

或

<div class="smallpics">
       <img onclick="showInBig(this)" id="picture1" src="images/picture1.png" alt="The Description" /> 
....
</div>

<div class="bigpic" align="center">
   <img id="bigpic" src="images/picture1.png" alt="" />
   <div id="bigpicDesc"> </div>

</div>
function showInBig(element){

 document.getElementById('bigpic').setAttribute('src',element.getAttribute('src')); 

 document.getElementById('bigpicDesc').innerHTML(element.element.getAttribute('alt'));
}

鉴于小图像的 alt 是描述。

【讨论】：

对图像使用alt 属性比自定义data-* 属性要好得多，因为您必须提供它和相关文本。为此 +1

【解决方案2】：

第一件事是清理您的 HTML 并分离出 JavaScript。这有很多好处。它使您的 HTML 和 JS 分开，而不会相互混淆。

您的所有onclick 代码都可以这样处理：

var big_pic = document.querySelector('#bigpic');
document.querySelector('body').addEventListener('click', function(evt) {
    if (!/^picture\d+$/.test(evt.target.id)) return;
    big_pic.src = evt.target.src;
}, false);

现在，让我们考虑添加说明。第一个问题是，您将如何存储这些以及与图像的关系？

一个明显的解决方案是将它们存储在图片元素的数据属性中。因此，正如我们从被点击图片的元素中读取 src 一样，我们将从同一来源读取它的描述。

所以我们的元素变成了：

<img id='picture1' src='some/src.jpg' data-descr='Picture description here' />

那么你将需要在大图区域中的描述占位符，所以添加一个段落。

最后，把上面的 JS 代码也改成描述的因素：

var
big_pic = document.querySelector('#bigpic'),
big_pic_descr = document.querySelector('.bigpic p');
document.querySelector('body').addEventListener('click', function(evt) {
    if (!/^picture\d+$/.test(evt.target.id)) return;
    big_pic.src = evt.target.src;
    big_pic_descr.innerHTML = evt.target.getAttribute('data-descr');
}, false);

【讨论】：

【解决方案3】：

可以通过两种方式完成，首先是利用data-属性⁽¹⁾

jsFiddle 1

var pics = document.querySelectorAll('.smallpics img'),
  bigPic = document.getElementById('bigpic'),
  descP = document.getElementById('description');

for (var i = 0, ln = pics.length; i < ln; i++) {
  // we pass each img with its src and data-desc attributes to the function.
  var $this = pics[i];
  theClickFunction($this, $this.getAttribute('src'), $this.getAttribute('data-desc'));
}

function theClickFunction($th, $src, $desc) {
  $th.addEventListener('click', function() {
    //on click we update the bigpic display and thedescription  paragraph
    bigPic.setAttribute('src', $src);
    bigPic.style.display = 'block';
    descP.innerHTML = $desc;
  });
}

body { margin: 0; padding: 0; }
.smallpics img { width: 19%; cursor: pointer; }
#bigpic { display:none}

<div class="gallery" align="center">
  <div class="smallpics">
    <img id="pic1" src="//dummyimage.com/300x100?text=pic1" data-desc="description of picture 1" />
    <img id="pic2" src="//dummyimage.com/300x100?text=pic2" data-desc="description of picture 2" />
    <img id="pic3" src="//dummyimage.com/300x100?text=pic3" data-desc="description of picture 3" />
    <img id="pic4" src="//dummyimage.com/300x100?text=pic4" data-desc="description of picture 4" />
    <img id="pic5" src="//dummyimage.com/300x100?text=pic5" data-desc="description of picture 5" />
    <img id="pic6" src="//dummyimage.com/300x100?text=pic6" data-desc="description of picture 6" />
    <img id="pic7" src="//dummyimage.com/300x100?text=pic7" data-desc="description of picture 7" />
    <img id="pic8" src="//dummyimage.com/300x100?text=pic8" data-desc="description of picture 8" />
    <img id="pic9" src="//dummyimage.com/300x100?text=pic9" data-desc="description of picture 9" />
    <img id="pic10" src="//dummyimage.com/300x100?text=pic10" data-desc="description of picture 10" />
  </div>
  <hr>
  <div class="bigpic" align="center">
    <img id="bigpic" src="images/picture1.png" alt="" />
    <p id="description"></p>
  </div>

另一种方法是使用一些隐藏元素，我在这里使用了<ul> 和它的lis，但它可能是divs 或p 等，而这种方式为页面添加了额外的标记当您有 HTML、样式和/或长描述而不是普通文本时，它更适合。

jsFiddle 2

var pics = document.querySelectorAll('.smallpics img'),
  DescLis = document.querySelectorAll('#hiddenDescs li'),
  bigPic = document.getElementById('bigpic'),
  descP = document.getElementById('description');

for (var i = 0, ln = pics.length; i < ln; i++) {
  // we pass each img with its src attribute.
  var $this = pics[i];
  theClickFunction($this, $this.getAttribute('src'), i);
}

function theClickFunction($th, $src, i) {
  $th.addEventListener('click', function() {
    //on click we update the bigpic display and thedescription  paragraph
    bigPic.setAttribute('src', $src);
    bigPic.style.display = 'block';
    // get the inner html of the corresponding li and inject it as innerHTML
    // of the descreption p
    descP.innerHTML = DescLis[i].innerHTML;
  });
}

⁽¹⁾_{使用 alt 属性，如 @Thuin's answer，而不是 data-* 更好，因为：This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.}

【讨论】：