無法將所選 Div 的值放入隱藏的輸入中

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 以進行故障排除。 我確認 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 返回未定義。

有任何想法嗎？

Answer 1

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" />&nbsp;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" />&nbsp;SUBFOLDER</div>

Answer 2

div 沒有val ，我建議將 div 中的值更改為data-value

然后使用它來獲取該字符串：

$("#moveto").val($(this).data("value"));

或者您可以在不更改 div 的情況下嘗試此操作

$("#moveto").val($(this).attr("value"));

Answer 3

如前所述，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" />&nbsp;SUBSUBFOLDER </div> <div style="padding-left:30px;" data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER </div> <div style="padding-left:15px;" data-value="C:\ANOTHER FOLDER WITH FILES"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;ANOTHER FOLDER WITH FILES </div> <div style="padding-left:15px;" data-value="C:\Test Folder"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;Test Folder </div> <div style="padding-left:30px;" data-value="C:\TEST FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER </div> <div style="padding-left:15px;" data-value="C:\TEST FOLDER WITH FILES"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST FOLDER WITH FILES </div> <div style="padding-left:15px;" data-value="C:\TEST MOVE FOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST MOVE FOLDER </div> </div> <input name="moveto" id="moveto" type="hidden" />