javascript - 如何用jQuery获取li中隐藏的值？

Question

我将文件名存储在隐藏输入的值中，我希望在单击“下载”或“重命名”标签时获取文件名。 比如我点击li的第一个元素Download就得到file1，怎么办？谢谢!

function Download() {
  alert("filename I clicked");
}

HTML

   <ul>
       <li >  <input type="hidden" value="file1" /> <span onclick="Download()">Download</span>   <span onclick="Rename()">Rename</span> </li>
       <li >  <input type="hidden" value="file2" /> <span onclick="Download()">Download</span>   <span onclick="Rename()">Rename</span> </li>
       <li >  <input type="hidden" value="file3" /> <span onclick="Download()">Download</span>   <span onclick="Rename()">Rename</span> </li>
   </ul>

Answer 1

您可以使用jquery和closest使其通用用于下载和重命名 如下。

此外，您还可以通过 jquery 方式摆脱下载函数。

$(document).ready(function(){
  $('span.download, span.rename').on('click', function() {
    var span = $(this);
    var fileName = span.closest('li').find('input[type="hidden"]').val();
 
    if(span.is('.download')) {
       // download part
      alert('Download: ' + fileName);
    } else if(span.is('.rename')) {
       // rename part
      alert('Rename: ' + fileName);
    }
  });
});

.download, .rename {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
       <li >  <input type="hidden" value="file1" /> <span class="download">Download</span>   <span class="rename">Rename</span> </li>
       <li >  <input type="hidden" value="file2" /> <span class="download">Download</span>   <span class="rename">Rename</span> </li>
       <li >  <input type="hidden" value="file3" /> <span class="download">Download</span>   <span class="rename">Rename</span> </li>
   </ul>