Javascript 悬停内容显示
我正在尝试编写一个 JS 函数（使用 Rails 中的原型），当鼠标悬停在 li 上时，它将显示 li 中隐藏的 div。每个 li 都有一个唯一的 id，它是一个数字，如下所示：
<li id="100">
<div style="display:none;" id="hover-display-content">Content</div>
<div style="display:none;" id="more-hover-display-content">Content</div>
<div style="display:none;" id="even-more-hover-display-content">Content</div>
</li>
但我不确定如何执行此操作，特别是在 JS 只显示该特定 li 的隐藏元素的情况下。
我在想：
Event.observe(window, 'load', function() {
Event.observe($("li"), 'mouseover', function() {
var id = readAttribute("id")
id.getElementById("hover-display-content").style.display = "inline";
id.getElementById("more-hover-display-content").style.display = "inline";
id.getElementById("even-hover-display-content").style.display = "inline";
});
Event.observe($("li"), 'mouseout', function() {
var id = readAttribute("id")
id.getElementById("hover-display-content").style.display = "none";
id.getElementById("more-hover-display-content").style.display = "none";
id.getElementById("even-hover-display-content").style.display = "none";
});
});
但这似乎不起作用。我哪里错了？
编辑：
我现在正在使用：
Event.observe(window, 'load', function() {
$$('li').invoke('observe', 'mouseover', function(event) {
this.children[0].toggle();
});
$$('li').invoke('observe', 'mouseout', function(event) {
document.children[0].toggle();
});
});
这是部分工作，但是我的代码如下所示：
<ul>
<li>
<div style="display:hidden;">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>
当我滚动 li 时，它会显示隐藏的 div，但是如果我滚动第二个 div，它会再次隐藏评论，即使这个 div 位于 li 中。为什么？
I am attempting to write a JS function (using prototype in rails) that will show hidden divs within a li when that li is mouseover'ed. Each li has a unique id that is a number, like so:
<li id="100">
<div style="display:none;" id="hover-display-content">Content</div>
<div style="display:none;" id="more-hover-display-content">Content</div>
<div style="display:none;" id="even-more-hover-display-content">Content</div>
</li>
I'm not sure how to go about doing this though, especially where the JS only shows the hidden elemenst for that specific li.
I'm thinking something like:
Event.observe(window, 'load', function() {
Event.observe($("li"), 'mouseover', function() {
var id = readAttribute("id")
id.getElementById("hover-display-content").style.display = "inline";
id.getElementById("more-hover-display-content").style.display = "inline";
id.getElementById("even-hover-display-content").style.display = "inline";
});
Event.observe($("li"), 'mouseout', function() {
var id = readAttribute("id")
id.getElementById("hover-display-content").style.display = "none";
id.getElementById("more-hover-display-content").style.display = "none";
id.getElementById("even-hover-display-content").style.display = "none";
});
});
But it doesn't seem to be working. Where am I going wrong?
Edit:
I am now using:
Event.observe(window, 'load', function() {
$('li').invoke('observe', 'mouseover', function(event) {
this.children[0].toggle();
});
$('li').invoke('observe', 'mouseout', function(event) {
document.children[0].toggle();
});
});
Which is partially working, however my code looks like the following:
<ul>
<li>
<div style="display:hidden;">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>
When I rollover the li it displays the hidden div, however if I rollover the second div it hides the comment again, even though this div is in the li. Why?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
带有标签并悬停？只是提供一个想法
with a tag and hover? just providing an idea
我不确定这是否是您唯一的问题，但一个关键问题是 DOM id 不能以数字开头，您需要在其前面添加诸如
model_name-100之类的前缀。此外，所有id都必须是唯一的。因此，您的内部内容div需要将这些id转换为类似class="even-more-hover-display-content"... 或者您可以在 id 前面加上父元素的id前缀，例如model_name-100-even-more-hover-display-content。Im not sure if this is your only issue but one key thing is that DOM id's cannot begin with a number, youll need to prefix that with something like
model_name-100. Additionally, allid's need to be unique. So your inner contentdiv's need to have thoseid's converted to classes likeclass="even-more-hover-display-content"... or alternatively you could jsut prefix the id with theidof the parent element likemodel_name-100-even-more-hover-display-content.我将从 .getElementByClass() 开始 --- 在 Proto 1.6 中已弃用
链接此处。
作为后备计划，以下是常规 JS 中有效的概念验证：
I would start with the .getElementByClass() --- deprecated in Proto 1.6
Link here.
As a fallback plan, here's a proof-of-concept in regular JS that works:
使用 jquery
并不是那么简单。 。
using jquery
isn't that simple . .