当我单击稍后监视图标时,刻度将正确显示。

但是,当我将相同的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但仍运行相同的功能?



请任何帮助将不胜感激。

最佳答案

我试图通过格式来理解,但似乎只与定位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”类。

关于javascript - 如何将相同的功能应用于同名的不同div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23073497/

10-12 12:36
查看更多