将相同的功能应用于多个相同的类 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 calls。在您的情况下，以下解决方案会更好。

<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();

有什么不清楚的可以问我。

Answer 2

document.getElementsByClassName 将返回数组，您需要通过在 [] 中传递元素的排名或位置来选择所需的元素。对于第二张图片，您需要将 1 作为数组参数传递。

请更新您的代码，如下所示

function showTick(){
 if(document.getElementsByClassName('tick')[1].style.display =='none') {
      document.getElementsByClassName('tick')[1].style.display ='block';

    }

}

     function hideTick(){
 if(document.getElementsByClassName('tick')[1].style.display =='block') {
      document.getElementsByClassName('tick')[1].style.display ='none'; 


    }

同样可以使用 jquery 来实现更动态的环境，其中视频 div 的数量可能会有所不同。在这里，您需要包含 jquery js 文件并需要绑定单击、鼠标离开事件，如下所示。有关 jquery 的更多信息，请参阅http://jquery.com/

<html>
<head>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    $('.watch-later').click(function(){
        $(this).parent().find('.tick').show();
    });

    $('.tick').click(function(){
        $(this).hide();
    });

    $('.tick').mouseleave(function(){
        $(this).hide();
    });

 });

</script>
</head><body>
<div id="video1" class="hovertext">
        <span class="video-txt">01:54</span>
        <span class="watch-later">
            <input type="image"  src="images/watchlater.jpg"/>
        </span>
        <span class="tick" style="display:none;">
            <input type="image"  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"  src="images/watchlater.jpg"/>
        </span>
        <span class="tick" style="display:none;">
            <input type="image"  src="images/tick.jpg" />
        </span>
    </div>
<div id="video3" class="hovertext">
        <span class="video-txt">01:54</span>
        <span class="watch-later">
            <input type="image"   src="images/watchlater.jpg"/>
        </span>
        <span class="tick" style="display:none;">
            <input type="image"  src="images/tick.jpg" />
        </span>
    </div>
</body>
</html>