无法将所选 Div 的值获取到隐藏的 Input

Question

我坚持从一组可选择的 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" />&nbsp;SUBSUBFOLDER</div>

<div style="padding-left:30px;" value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER">

<img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER</div>

<div style="padding-left:15px;" value="C:\ANOTHER FOLDER WITH FILES">

<img src="../graphics/icons/closedfolder.gif" />&nbsp;ANOTHER FOLDER WITH     FILES</div>

<div style="padding-left:15px;" value="C:\Test Folder">

<img src="../graphics/icons/closedfolder.gif" />&nbsp;Test Folder</div>

<div style="padding-left:30px;" value="C:\TEST FOLDER WITH FILES\SUBFOLDER">

<img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER</div>

<div style="padding-left:15px;" value="C:\TEST FOLDER WITH FILES">

<img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST FOLDER WITH     FILES</div>

<div style="padding-left:15px;" value="C:\TEST MOVE FOLDER">

<img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST MOVE FOLDER</div>

</div>

<input name="moveto" id="moveto" type="hidden" />

Javasript 应该拾取路径选择，更改背景颜色，并将 div 值传输到隐藏的输入值，moveto。然后我可以在后面的代码中获取该值。

我向 javascript 添加了几个 window.alerts 以进行故障排除。我在选择DIV时变化了JavaScript触发。但是，该值始终为空。这是代码：

$(文档).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());

            });

          });

预先感谢您的帮助 ！

还尝试过：

window.alert($(this).attr("value"));

Window.alert 返回为未定义。

有任何想法吗？

Answer 1

value不是该<div>元素的有效属性 - 因此 jQuery 无法通过 返回它.val()。相反，我建议您使用data-value="..."然后.data("value")使用$(function(){&nbsp; $("div").click(function() {&nbsp; &nbsp; console.log($(this).data("value"));&nbsp; });});<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" />&nbsp;SUBFOLDER</div>value不是该<div>元素的有效属性 - 因此 jQuery 无法通过 返回它.val()。相反，我建议您使用data-value="..."然后.data("value")使用$(function(){&nbsp; $("div").click(function() {&nbsp; &nbsp; console.log($(this).data("value"));&nbsp; });});<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" />&nbsp;SUBFOLDER</div>

Answer 2

如前所述，div 没有值。您需要使用数据属性。$(document).ready(function () {&nbsp; $("#destinationSelector>div").live("click", function () {&nbsp; &nbsp; window.alert("You Clicked the Path Selection for Move");&nbsp; &nbsp; $(this).siblings().css('background-color', '#fff');&nbsp; &nbsp; $(this).css('background-color', '#ccc');&nbsp; &nbsp; $("#moveto").val($(this).attr('data-value'));&nbsp; &nbsp; window.alert($(this).attr('data-value'));&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><b>Select the destination:</b><div id="destinationSelector">&nbsp; <div style="padding-left:45px;"&nbsp; &nbsp; &nbsp;data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER\SUBSUBFOLDER">&nbsp; &nbsp; <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBSUBFOLDER&nbsp; </div>&nbsp; <div style="padding-left:30px;" data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER">&nbsp; &nbsp; <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER&nbsp; </div>&nbsp; <div style="padding-left:15px;" data-value="C:\ANOTHER FOLDER WITH FILES">&nbsp; &nbsp; <img src="../graphics/icons/closedfolder.gif" />&nbsp;ANOTHER FOLDER WITH&nbsp; &nbsp; &nbsp;FILES&nbsp; </div>&nbsp; <div style="padding-left:15px;" data-value="C:\Test Folder">&nbsp; &nbsp; <img src="../graphics/icons/closedfolder.gif" />&nbsp;Test Folder&nbsp; </div>&nbsp; <div style="padding-left:30px;" data-value="C:\TEST FOLDER WITH FILES\SUBFOLDER">&nbsp; &nbsp; <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER&nbsp; </div>&nbsp; <div style="padding-left:15px;" data-value="C:\TEST FOLDER WITH FILES">&nbsp; &nbsp; <img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST FOLDER WITH&nbsp; &nbsp; &nbsp;FILES&nbsp; </div>&nbsp; <div style="padding-left:15px;" data-value="C:\TEST MOVE FOLDER">&nbsp; &nbsp; <img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST MOVE FOLDER&nbsp; </div></div><input name="moveto" id="moveto" type="hidden" />

Answer 3

Div 没有val，我建议将 div 中的值更改为data-value然后使用它来获取该字符串：$("#moveto").val($(this).data("value"));或者你可以在不改变 div 的情况下试试这个$("#moveto").val($(this).attr("value"));