使用 mouseover/hover 事件设置隐藏元素的值答案

【问题标题】：Set the value of hidden element with mouseover/hover event使用 mouseover/hover 事件设置隐藏元素的值
【发布时间】：2016-04-04 01:18:27
【问题描述】：

我正在尝试让每个鼠标悬停事件都使用 #id 更新隐藏值

我的来源：

#html
<li><a href="javascript:void(0)" onmouseover="set_mouseover('1')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('2')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('3')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('4')"></a></li>

...

<input type="hidden" name="mouseover_cell_id" id="mouseover_cell_id" value="">

#code
function set_mouseover(id) {
  jQuery('#mouseover_cell_id').val(id);
}

上面的代码不起作用。知道为什么吗？为什么 onmouseover 甚至不设置值？

【问题讨论】：

您在控制台上遇到任何错误？你初始化 jQuery 库了吗？
jQuery 加入了吗？
浏览这个答案 --> stackoverflow.com/a/6579216/3682162
a中没有触发事件的内容..

标签： javascript jquery

【解决方案1】：

检查是否包含了jquery lib文件，
检查您是否在<script> 标签内添加了function set_mouseover(id)。

function set_mouseover(id) {
  jQuery('#mouseover_cell_id').val(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li><a href="javascript:void(0)" onmouseover="set_mouseover('1')">1</a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('2')">2</a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('3')">3</a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('4')">4</a></li>

<input type="text" name="mouseover_cell_id" id="mouseover_cell_id" value="">

如果您在控制台错误后遇到问题

【讨论】：

【解决方案2】：

试试这个

#html
<li><a href="javascript:void(0)" onmouseover="set_mouseover('1')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('2')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('3')"></a></li>
<li><a href="javascript:void(0)" onmouseover="set_mouseover('4')"></a></li>

...

<input type="hidden" name="mouseover_cell_id" id="mouseover_cell_id" value="">

#code
function set_mouseover(id) {
  document.getElementById('mouseover_cell_id').value=id;
}

这会起作用，谢谢）：

【讨论】：

您想详细了解什么或有什么问题？
我不明白你为什么将jQuery 替换为document。这似乎使您从原始问题中转移了很多注意力。那些电话是什么？我不应该使用 jQuery 吗？不好吗？你做的更好吗？如果是这样，如何/为什么？
在问题中一切似乎都是正确的，但它仍然无法正常工作可能是因为 jquery（他没有附上那个）所以我给你使用文档的全局解决方案，没有理由 jQuery 不好，或者不需要使用，但根据情况我建议他
太好了，你最好详细说明你的答案，因为 试试这个code blob 不是帮助未来访问者学习如何钓鱼的答案类型。阅读this 了解我为什么要逼你。请注意共识是如何对这些答案投反对票的。
np 先生，我是堆栈溢出的新手，但我确信我可以帮助人们解决他们的问题，并且我也了解了这个网站的规则

【解决方案3】：

我建议使用纯 JavaScript，而且如果您不希望锚标签出现在任何地方，也可以使用 span 标签。也可能是因为锚标签中没有任何内容，它们没有宽度或高度，因此无法悬停。

代码：

<style type="text/css">
    li > span {
        width: 50px;
        Height: 50px;
    }
</style>
<script type="text/javascript">
    function set_mouseover(id) {
        document.getElementById("mouseover_cell_id").value = id;
    }
</script>
<li><span onmouseover="set_mouseover(1);"></span></li>

希望这会有所帮助。

【讨论】：