所以我在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;
}
所以,如果有人能帮助我,我会非常感激:)。如果提供代码片段会导致整体问题难以破译,我可以将所有代码上传到我的网站并在此处共享。
答案 0 :(得分:2)
我看到的主要问题是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');
}
);
});
答案 1 :(得分:0)
正如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();
});
});
});