Question

我正在寻找一种更优雅的方式来使用内联javascript来隐藏/显示div。

如果您将鼠标悬停在汽车上的橙色/黄色圆形徽标上，则应显示标记。当他们被淘汰时，他们应该消失。

网址：

http://174.120.239.48/~peakperf/

<div class="second">
    <div id="speech2" style="display: none">
        <img src="<?php bloginfo('template_url'); ?>/images/speech2.png" width="334" height="50">
        </div>
    <a id="various2" href="#inline2,javascript:HideContent('speech1')" title="" onmouseover="HideContent('speech1'); return true;">
        <img src="<?php bloginfo('template_url'); ?>/images/clicker.png" width="62" height="50" onmouseover="document.getElementById('speech2').style.display = 'block'" onmouseout="document.getElementById('speech2').style.display = 'none'">
    </a>
</div>

这是所用代码的pastebin：

http://pastebin.com/JsW6eJRZ

谢谢。

Answer 1

更优雅的解决方案是利用JQuery。将库包含到文件中后，使用以下选择器

完成div节目

$('#idOfDiv').show();

或者如果没有id而是类

$('.ClassName').show();

现在不是像现在一样在html中使用onclick事件，而是在ready（）方法中将它们绑定在jquery中，如下所示：

$(document).ready(function()
{
   $('#idOfDiv').bind('click', function()
   {
      //do work here in this anonymous callback function
   });
});

所有这些都可以在外部js文件中完成，这样可以显着清理你的html代码并将所有的javascript逻辑放在一个位置。

修改适用于您的情况的示例

$(document).ready(function() { $('#various1').mouseover(function() { $('#speech1').show(); }); $('#various1').mouseout(function() { $('#speech1').hide(); }); });

如果你变得狡猾并使用for循环，那么你可以将数字附加到代表选择器的字符串的末尾，如此

$(document).ready(function() { for(var i = 1; i < 7; i++) { $('#various' + i).mouseover(function() { $('#speech' + i).show(); }); $('#various' + i).mouseout(function() { $('#speech' + i).hide(); }); } });

mouseout和mouseover功能只是使用的明确版本

$('selector').bind('mouseover', function() { }); $('selector').bind('mouseout', function() { });

Answer 2

您是否考虑过使用jQuery？另外，为什么代码需要内联？

我建议做这样的事情：http://jsfiddle.net/4N9ym/2/

请注意，我在这里反转了一些东西（你可能想要动画而不是制作动画）。

javascript hide / show - 更优雅的方式来做到这一点？

2 个答案: