当我点击“稍后观看”图标时,勾号将正确显示。
但是,当我将相同的 div 格式应用于另一个部分时,勾号将出现在第一个 div 处。
这是我的 HTML 和 JavaScript:
<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>
第二部分只有不同的视频ID
<div id="video2" 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>
my javascript
<script type="text/javascript">
function conceal() {
if(document.getElementsByClassName('tick')[0].style.display =='block') {
document.getElementsByClassName('tick')[0].style.display ='none';
}
}
function showTick(){
if(document.getElementsByClassName('tick')[0].style.display =='none') {
document.getElementsByClassName('tick')[0].style.display ='block';
}
}
function hideTick(){
if(document.getElementsByClassName('tick')[0].style.display =='block') {
document.getElementsByClassName('tick')[0].style.display ='none';
}
}
</script>
它看起来像这样。当我单击第二部分时,勾号出现在第一部分:S
[IMG] http://i59.tinypic.com/2itdgi.jpg[/IMG]
如何更改 JavaScript 或内联 div,使其不会影响任何其他 div 但仍运行相同的函数?
请提供任何帮助,我们将不胜感激。
最佳答案
问题是你总是使用第一个 div (index=0)。
您可以更改函数以接受索引作为参数,如下所示:
<div id="video1" class="hovertext">
<span class="video-txt">01:54</span>
<span class="watch-later">
<input type="image" onclick="showTick(0)" src="images/watchlater.jpg" />
</span>
<span class="tick" style="display:none;">
<input type="image" onclick="conceal(0)" onMouseOut="hideTick(0)" src="images/tick.jpg" />
</span>
</div>
<div id="video2" class="hovertext">
<span class="video-txt">01:54</span>
<span class="watch-later">
<input type="image" onclick="showTick(1)" src="images/watchlater.jpg" />
</span>
<span class="tick" style="display:none;">
<input type="image" onclick="conceal(1)" onMouseOut="hideTick(1)" src="images/tick.jpg" />
</span>
</div>
JavaScript 是这样的:
<script type="text/javascript">
function conceal(index) {
if(document.getElementsByClassName('tick')[index].style.display =='block') {
document.getElementsByClassName('tick')[index].style.display ='none';
}
}
function showTick(index){
if(document.getElementsByClassName('tick')[index].style.display =='none') {
document.getElementsByClassName('tick')[index].style.display ='block';
}
}
function hideTick(index){
if(document.getElementsByClassName('tick')[index].style.display =='block') {
document.getElementsByClassName('tick')[index].style.display ='none';
}
}
</script>
更好的解决方案:
还尝试始终缓存 DOM 调用
。对于您的情况,以下解决方案会更好。
<script type="text/javascript">
var ticks = document.getElementsByClassName('tick');
function conceal(index) {
if(ticks [index].style.display =='block') {
ticks [index].style.display ='none';
}
}
function showTick(index){
if(ticks [index].style.display =='none') {
ticks [index].style.display ='block';
}
}
function hideTick(index){
if(ticks [index].style.display =='block') {
ticks [index].style.display ='none';
}
}
</script>
更新:
这是另一个(更好的)解决方案。所有监听器都动态附加在代码中(而不是 HTML 标记中)。另外,我认为您可以使用 IMG
标签而不是 INPUT
来显示图像。
这里是更新后的 HTML 标记:
<div id="video1" class="hovertext">
<span class="video-txt">01:54</span>
<span class="watch-later">
<img src="images/watchlater.jpg" />
</span>
<span class="tick" style="display:none;">
<img src="images/tick.jpg" />
</span>
</div>
<div id="video2" class="hovertext">
<span class="video-txt">01:54</span>
<span class="watch-later">
<img src="images/watchlater.jpg" />
</span>
<span class="tick" style="display:none;">
<img src="images/tick.jpg" />
</span>
</div>
以及新的 Javascript 代码:
function init() {
var watchLaters = document.getElemenetsByClassName('watch-later');
for(var i=0, l = watchLaters.length; i < l; i++) {
var tick = watchLaters[i].parentNode.getElementsByClassName('tick')[0];
watchLaters[i].onclick = tick.onmouseout = function() {
if(tick.style.display == 'none') {
tick.style.display = 'block';
}
};
tick.onclick = function() {
if(tick.style.display == 'block') {
tick.style.display = 'none';
}
};
}
}
init();
有什么不懂的可以问我。
关于javascript - 将相同的函数应用于多个相同的类 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23075422/