javascript - 将相同的功能应用于多个相同的类 Div

Question

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

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

如有任何帮助，我们将不胜感激。

Answer 1

问题是您总是使用第一个 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();

有什么不明白的可以问我。