当我单击稍后监视图标时,刻度将正确显示。
但是,当我将相同的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/