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 in-line，以便它不会影响任何其他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 pls的更多信息，请参阅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>

将相同的函数应用于多个相同的类Div

2 个答案: