[英]Can't get the value of the selected Div into a hidden Input
我一直坚持从一组可选的 div 中获取路径值。 它是将经典 ASP 转换为点网的项目的一部分。 关于这个主题还有其他帖子,但没有看到与我的情况相符的帖子。
这是提供给用户选择的 HTML 代码。 它是可用文件夹的列表。
<b>Select the destination:</b>
<div id="destinationSelector"> <div style="padding-left:45px;" value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER\SUBSUBFOLDER">
<img src="../graphics/icons/closedfolder.gif" /> SUBSUBFOLDER</div>
<div style="padding-left:30px;" value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER">
<img src="../graphics/icons/closedfolder.gif" /> SUBFOLDER</div>
<div style="padding-left:15px;" value="C:\ANOTHER FOLDER WITH FILES">
<img src="../graphics/icons/closedfolder.gif" /> ANOTHER FOLDER WITH FILES</div>
<div style="padding-left:15px;" value="C:\Test Folder">
<img src="../graphics/icons/closedfolder.gif" /> Test Folder</div>
<div style="padding-left:30px;" value="C:\TEST FOLDER WITH FILES\SUBFOLDER">
<img src="../graphics/icons/closedfolder.gif" /> SUBFOLDER</div>
<div style="padding-left:15px;" value="C:\TEST FOLDER WITH FILES">
<img src="../graphics/icons/closedfolder.gif" /> TEST FOLDER WITH FILES</div>
<div style="padding-left:15px;" value="C:\TEST MOVE FOLDER">
<img src="../graphics/icons/closedfolder.gif" /> TEST MOVE FOLDER</div>
</div>
<input name="moveto" id="moveto" type="hidden" />
Javasript 应该拾取路径选择,更改背景颜色,并将 div 值传输到隐藏的输入值 moveto。 然后我可以在后面的代码中获取该值。
我在 javascript 中添加了几个 window.alerts 以进行故障排除。 我确认 javascript 在选择 div 时触发。 但是,该值始终为 null。 这是代码:
$(文档).ready(函数 () {
$("#destinationSelector>div").live("click", function () {
window.alert("You Clicked the Path Selection for Move");
$(this).siblings().css('background-color', '#fff');
$(this).css('background-color', '#ccc');
$("#moveto").val($(this).val());
window.alert($(this).val());
});
});
预先感谢您的帮助 !
在查看了有用的回复后,我使用 HTML 和以下 Javascript 中的数据值重新编码:
$("#destinationSelector").live("click", function () {
window.alert("You Clicked the Path Selection for Move");
$(this).siblings().css('background-color', '#fff');
$(this).css('background-color', '#ccc');
window.alert($(this).data('value'));
$("#moveto").val($(this).data("value"));
});
也试过:
window.alert($(this).attr("value"));
Window.alert 返回未定义。
有任何想法吗?
value
不是<div>
元素的有效属性 - 因此 jQuery 无法通过.val()
返回它。
相反,我建议您使用data-value="..."
然后使用.data("value")
代替
$(function(){ $("div").click(function() { console.log($(this).data("value")); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="padding-left:30px;" data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" /> SUBFOLDER</div>
正如@melancia 在他们的评论中所说,如果您无法更新 HTML,您可以使用.attr("value")
而不是.val()
。
但是, data-value
在 W3C 检查下是有效的,而value
不是,所以如果可能的话,我会在上面的例子中使用 go。
$(function(){ $("div").click(function() { console.log($(this).attr("value")); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="padding-left:30px;" value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" /> SUBFOLDER</div>
div 没有val
,我建议将 div 中的值更改为data-value
然后使用它来获取该字符串:
$("#moveto").val($(this).data("value"));
或者您可以在不更改 div 的情况下尝试此操作
$("#moveto").val($(this).attr("value"));
如前所述,div 没有值。 您需要使用 data- 属性。
$(document).ready(function () { $("#destinationSelector>div").live("click", function () { window.alert("You Clicked the Path Selection for Move"); $(this).siblings().css('background-color', '#fff'); $(this).css('background-color', '#ccc'); $("#moveto").val($(this).attr('data-value')); window.alert($(this).attr('data-value')); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <b>Select the destination:</b> <div id="destinationSelector"> <div style="padding-left:45px;" data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER\SUBSUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" /> SUBSUBFOLDER </div> <div style="padding-left:30px;" data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" /> SUBFOLDER </div> <div style="padding-left:15px;" data-value="C:\ANOTHER FOLDER WITH FILES"> <img src="../graphics/icons/closedfolder.gif" /> ANOTHER FOLDER WITH FILES </div> <div style="padding-left:15px;" data-value="C:\Test Folder"> <img src="../graphics/icons/closedfolder.gif" /> Test Folder </div> <div style="padding-left:30px;" data-value="C:\TEST FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" /> SUBFOLDER </div> <div style="padding-left:15px;" data-value="C:\TEST FOLDER WITH FILES"> <img src="../graphics/icons/closedfolder.gif" /> TEST FOLDER WITH FILES </div> <div style="padding-left:15px;" data-value="C:\TEST MOVE FOLDER"> <img src="../graphics/icons/closedfolder.gif" /> TEST MOVE FOLDER </div> </div> <input name="moveto" id="moveto" type="hidden" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.