Question

我正在尝试获取一个JS脚本以在每个嵌套div中单独执行。我遇到了类冲突，而且我无法弄清楚如何在没有冲突的情况下基本遍历每个div。

我尝试使用.each，运行不同的循环，对divs进行分类等等。我尝试了很多失败的事情。我希望我能跟踪所有不同的方法，但是我已经花了几个小时了，并且未能找到正确的语法。很明显，编程时我需要认真的工作。我有不错的HTML，CSS和引导程序，但是我刚刚开始学习Javascript和jQuery。

<link href="Styles/StyleSheet.css" rel="stylesheet" />
<script src="Scripts/thumbs.js"></script>

<div class="container-fluid maxW opaque padtop">
    <!-- Jumbotron -->
    <div class="jumbotron container-fluid">
        <div>
            <img src="jumbo.jpg" alt="" /></a>
        </div>
    </div>

    <!--First Div Thumbnail Photo Block -->
    <div class="container text-center">
        <h3 class="text-center mt-4 mb-4">Photo Block 1</h3>
        <div>
            <img id="0" class="preview normal" src="" alt="" /><br />
            <img id="1" class="thumb normal" src="sumpic.jpg" alt="" onmouseover="preview(this)" />
            <img id="2" class="thumb normal" src="sumotherpic.jpg" alt="" onmouseover="preview(this)" />
        </div>
    </div>

    <!--Second Div Thumbnail Photo Block -->
    <div class="container text-center">
        <h3 class="text-center mt-4 mb-4">Photo Block 2</h3>
        <div>
            <img id="0" class="preview normal" src="" alt="" /><br />
            <img id="1" class="thumb normal" src="sumotherpic1.jpg" alt="" onmouseover="preview(this)" />
            <img id="2" class="thumb normal" src="sumotherpic2.jpg" alt="" onmouseover="preview(this)" />
            <img id="3" class="thumb normal" src="sumotherpic3.jpg" alt="" onmouseover="preview(this)" />
        </div>
    </div>
</div>

这是CSS：

.preview {
  width: Auto;
  max-height: 600px;
}

.thumb {
  width: 205px;
  margin-right: 3px;
}

.normal {
  border: 3px solid #000000;
}

.selected {
  border: 3px solid #ff0000;
}

和JavaScript代码：

var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";

function preview(img) {
    document.getElementById(lastImg).className = "thumb normal";
    img.className = "thumb selected";
    document.getElementById(0).src = img.src;
    lastImg = img.id
}

我认为就这些。

因此，我的目标是使每个div块在其下方具有拇指，而在上方显示鼠标悬停图像作为大显示图像。只要有一个div，它就可以很好地工作。一旦我加2+，我就会遇到我认为是类冲突的情况，其中只有第一个div显示大图像。它将显示在任何div中最后鼠标悬停的大图像。除第一个以外的所有div中均为空。拇指没有在每个div中显示的问题。预先感谢您的帮助，也感谢您的理解，我是新手并尝试学习。

Answer 1

好吧，您使用的是纯Javascript，没有jQuery。当然可以

我看到的明显错误是id = 0而不是“ 0” 另一件事是使用“ className”代替设置属性类

我通常会建议2件事：使用示例案例，F11和打开控制台

根据您的代码，我进行了一些小修正以帮助您入门并了解下一步。我认为您应该为lastimg，“ 0”和img定义对象变量，然后使代码更具可读性和可伸缩性

var lastImg = 1; //Set initial thumbnail and preview
document.getElementById("0").src = document.getElementById(lastImg).src;
document.getElementById(lastImg).setAttribute("class", "thumb selected");

function preview(img) {
    document.getElementById(lastImg).setAttribute("class", "thumb normal");
document.getElementById(img).setAttribute("class", "thumb selected");
    document.getElementById("0").getAttribute("src") = document.getElementById("img").getAttribute("src");
    lastImg = img;
  }

如何为每个单独的嵌套div显示图像执行javascript？

1 个答案: