如何将相同的功能应用于同名的不同div？

Question

当我点击稍后观看图标时，勾号会正确显示。

但是，当我将相同的 div 格式应用到另一个部分时，勾号将出现在第一个 div 上。

这是我的 HTML 和 JavaScript：

<div class="hovertext"> <span class="video-txt">01:54</span>
    <span class="watch-later"><input type="image" onclick="showTick()" src="images/watchlater.jpg" /></span>
    <span id="tick" style="display:none;"><input type="image" onclick="conceal()" onMouseOut="hideTick()" src="images/tick.jpg" /></span>
    <script type="text/javascript">
    function conceal() {
        if (document.getElementById('tick').style.display == 'block') {
            document.getElementById('tick').style.display = 'none';
        }
    }

    function showTick() {
        if (document.getElementById('tick').style.display == 'none') {
            document.getElementById('tick').style.display = 'block';
        }
    }

    function hideTick() {
        if (document.getElementById('tick').style.display == 'block') {
            document.getElementById('tick').style.display = 'none';
        }
    }
    </script>
</div>

它看起来像这样

我希望它看起来像这样。如何更改 JavaScript 或 div 内联，使其不会影响任何其他 div 但仍运行相同的功能？

请，任何帮助将不胜感激。

Answer 1

我试图通过格式来理解，但似乎它只是与定位一个 ID 与一个类有关。 HTML 只允许每页有一个 ID 实例才能有效。在这种情况下，每当您按 ID 定位时，它都可能会影响找到的第一个实例。最好有基于父视频的各种ID。

类似这样的：

<div id="video1" class="hovertext">
    <span class="video-txt">01:54</span>
    <span class="watch-later">
        <input type="image" onclick="showTick()" src="images/watchlater.jpg" />
    </span>
    <span class="tick" style="display:none;">
        <input type="image" onclick="conceal()" onMouseOut="hideTick()" src="images/tick.jpg" />
    </span>
</div>

您的 javascript 也不应该包含在每个父 div 中。然后，您应该定位您正在与之交互的 ID 的“tick”类。