Question

情况：我创建了一个图片库。缩略图显示和onmouseover，特定图像显示在另一个容器中。每个图像都有一个描述，可以通过简单的功能检索。当图像悬停（onmouseover）时，我想设置特定图像并获取其描述。

问题： onmouseover-event调用函数“hover（）”。在此功能中，大图像的源将更改为选定的源。我无法让它改变描述div容器的值。到现在为止，我只是尝试将文本更改为任何内容，最后，应该接收存储在“getDescription（）”函数中的实际描述值。

我尝试了什么：我尝试了不同的版本和组合来访问说明div容器的文本。使用“document.getElementById（'description'）。innerHTML =”+ i +“更改值，但它设置固定的最后/最高i值。

代码：

<div id="thumbnails">
</div><br/>

<div id="description" style="width:100%; text-align:center;"> text </div>

<div  class="preview" align="center">
<img id="preview" name="preview" src="images/img1.jpg"/>
</div>

<script type="text/javascript">
    for (var i=1; i<=5; i++) {
        document.getElementById("thumbnails").innerHTML += "<img onmouseover="+hover(i)+" name='img"+i+"' src='images/img"+i+".jpg'/>";
}

function hover(i) { 
    return "'preview.src=img"+i+".src'"; //works, but does not include the change of the description
    return "'preview.src=img"+i+".src'; 'description.innerHTML="+i+"'"; //does not work
}

function getDescription(value)
{
    return value == '1' ? "description 1":
           value == '2' ? "description 2":
           value == '3' ? "description 3":
           value == '4' ? "description 4":
           value == '5' ? "description 5": '';
}
</script>

注意：感谢任何帮助，但我不能使用jquery。

Answer 1

你似乎是以错误的方式解决这个问题。

您在脚本中保留说明，但根据计数生成图像链接，然后您尝试将其与一些内联事件处理程序和其他内容放在一起。

使用对象数组将图像链接和描述保持在一起，然后迭代它，并插入元素而不使用任何内联JavaScript。

var images = [{
  src: 'images/img1.jpg',
  des: 'description 1'
}, {
  src: 'images/img2.jpg',
  des: 'description 2'
}, {
  src: 'images/img3.jpg',
  des: 'description 3'
}, {
  src: 'images/img4.jpg',
  des: 'description 4'
}, {
  src: 'images/img5.jpg',
  des: 'description 5'
}];

images.forEach(function(image, i) {
  var img  = new Image();
  img.name = 'img' + i;
  img.src  = image.src;

  img.addEventListener('mouseover', function() {
    document.getElementById('preview').src = this.src;
    document.getElementById('description').textContent = image.des;
  }, false);

  document.getElementById("thumbnails").appendChild(img);
});

Answer 2

而不是使用迭代，

    for (var i=1; i<=5; i++) {
        document.getElementById("thumbnails").innerHTML += "<img onmouseover="+hover(i)+" name='img"+i+"' src='images/img"+i+".jpg'/>";
}

只声明全局var i（您将其用作数组索引），然后在鼠标悬停++i上递增它，然后应用模除法来限制上边界（++count % 5在您的情况下）。

希望这可能会有所帮助。

Answer 3

您的鼠标悬停事件无法工作的原因是因为您为onmouseover返回了一个字符串值，在HTML中看起来像<img onmouseover="preview.src=imgx.src">。

如果你想使用内联，你的onmouseover需要成为被调用的函数。

使用您的代码，可以快速修复，

// Your elements
const thumbnails = document.getElementById("thumbnails");
const description = document.getElementById("description");
const preview = document.getElementById("preview");

// Setting up each image element with inline event handler
for(let i = 1; i <= 5; i++ ) {
  thumbnails.innerHTML += "<img id="+ i +" onmouseover='onHover(this)' src='images/img"+ i +".jpg' />"
}

// Event handler
function onHover(e) {
  const imageID = e.id;
  setPreview(imageID);
  setDescription(imageID);
}

function setPreview(id) {
  preview.innerHTML = "<img src='images/img" + id + ".jpg' />";
}

function setDescription(id) {
  description.innerHTML = getDescription(id);
}

function getDescription(value)
{
    return value == '1' ? "description 1":
          value == '2' ? "description 2":
          value == '3' ? "description 3":
          value == '4' ? "description 4":
          value == '5' ? "description 5": ''
}

虽然要考虑的不仅仅是五个图像，但这应该被重构为更具动态性。 ID 也完全避免使用内联事件处理程序。

您可以在W3Schools

上查看一些示例

图像onmouseover - 使用JavaScript更改图片和文本

3 个答案: