如何将相同的函数应用于同名的不同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 in-line，以便它不会影响任何其他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中。然后你应该定位＆＃34; tick＆＃34;您正在与之交互的ID的类。