所以我用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程序员来说,这种令人讨厌的Java脚本是显而易见的。

这是与“隐藏” 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;
}


因此,如果有人可以帮助我,我将非常感激:)。如果提供代码片段使整体问题难以理解,我可以将所有代码上传到我的站点并在此处共享。

最佳答案

我看到的主要问题是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');
    }
  );
});

10-05 20:27
查看更多