需要帮助让我的 Javascript 不引人注目

Question

所以我用 HTML + Javascript 创建了一个订单表单，我想要使用 Javascript 的目的是，当有人将鼠标悬停在汤的“标签”上时，隐藏的 div 将可见（稍后我打算获取代码将显示有关标签悬停在上面的汤的信息）。我已经设法做到这一点，但我知道我实现的 Javascript 代码很唐突，我想将相同的代码（或等效代码）放入我的外部 Javascript 文件中，以使其不唐突。

下面是我表单中的一段代码（带有“引人注目的”Javascript）：

<form method="post" action="#" name="souporderform" id="souporderform" onsubmit="return validate()">
**<div id="soupinfo"></div>** <!-- hidden div -->

<table>

<tr><th>Item</th><th>Price</th><th>Quantity</th><th id="subtotal_header">Subtotal</th>
<tr>
<td><label for="chicken_quantity" onmouseover="document.getElementById('soupinfo').style.visibility = 'visible';" onmouseout="document.getElementById('soupinfo').style.visibility = 'hidden';">Chicken Soup</label></td>
<td>$3.50<input type="hidden" id="chicken_price" value="3.50"></td>
<td class = "center"><select id="chicken_quantity" name="chicken_quantity" size="1">
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="chicken_subtotal"></td>

我确信对于有经验的 Javascript 编码者来说，查看此内容时，引人注目的 Javascript 是显而易见的...

这是与“隐藏”div 相关的 CSS 代码片段：

#soupinfo{
position:absolute;
background-color:#ff0000;
color:#000000;
width:100px;
height:20px;
margin-top:-20px;
margin-left:0px;
border:1px solid black;
visibility:hidden;
}

我确实有一个外部 Javascript 文件，这就是我试图以不引人注目的方式复制我想要的内容：

var soupInfoDiv = document.getElementById("soupinfo");
var formLabel = document.getElementsByTagName("label");

for(var i = 0; i < formLabel.length; i++){
formLabel[i].onmouseover = soupInfoDiv.style.visibility = 'visible';
formLabel[i].onmouseout = soupInfoDiv.style.visibility = 'hidden';
}

此代码放置在一个名为“setup”的函数中，该函数在加载页面时执行，其中下列的代码：

if (document.getElementById) {
window.onload = setup;
}

所以如果有人可以帮助我，我将非常感激:)。如果提供代码片段会使整个问题难以破译，我可以将所有代码上传到我的网站并在此处共享。

Answer 1

我看到的主要问题是 mouseover 和 mouseout 处理程序需要是函数。

var soupInfoDiv = document.getElementById("soupinfo");
var formLabel = document.getElementsByTagName("label");

for(var i = 0; i < formLabel.length; i++){
  formLabel[i].onmouseover = function() {
    soupInfoDiv.style.visibility = 'visible';
  }
  formLabel[i].onmouseout = function() {
    soupInfoDiv.style.visibility = 'hidden';
  }
}

我建议您考虑 jQuery，因为所有这些，包括 window.load 都可以简化为：

$(function() {
  $('#souporderform label').hover(
    function() {
      $('#soupinfo').css('visibility', 'visible');
    },
    function() {
      $('#soupinfo').css('visibility', 'hidden');
    }
  );
});

Answer 2

正如 Blender 所评论的，我还建议为此使用 javascript 库，例如 jQuery 或 MooTools。现在，如果我理解正确的话，您只想将鼠标悬停在元素 x 上时，希望显示元素 y 。这可以通过使用 html 5 的数据属性（适用于较旧的浏览器）和 javascript 框架（我将在这里使用 jQuery，但如果您需要 mootools，只需询问，我会翻译它）来非常简单地完成）。

首先，您应该记下您想要将鼠标悬停在其上的元素，如下所示：

<div data-hover-elm="id_of_item_to_show">.......</div>

它可能是 div、标签或您想要的任何内容。

然后，在外部js文件中，您需要做的就是：

$(function() {
    var elms = $('[data-hover-elm]');
    $.each(elms, function() {
        var $this = $this,
            $itm = $('#' + $this.attr('data-hover-item'));
        $this.hover(function() {
            $itm.show();
        }, function() {
            $itm.hide();
        });
    });
});