javascript - 我在哪里可以将文件名存储在 html 的 li 标签中？

Question

我列出了许多带有 li 标签的文件，我希望可以删除和重命名文件，所以我用代码存储文件名，

但是 li 在 html5 中没有 value 属性，我在哪里可以在 html 中的 li 标签中存储文件名？谢谢!

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

Answer 1

使用 HTML5 数据属性:

 <ul >
       <li data-filename="file1"> <span class ="download">Download</span>   <span class="rename">Rename</span> </li>
       <li data-filename="file2"> <span  class ="download">Download</span>   <span class="rename">Rename</span> </li>
       <li data-filename="file3"> <span  class ="download">Download</span>   <span class="rename">Rename</span> </li>
   </ul>

我还建议将点击处理程序从 HTML 移出并移至 javascript 中。这可以让您将代码保存在 html 部分，并且还可以提供更好的代码质量。请注意，我下面使用的是 jQuery - 但也可以用纯 JS 来完成。

$(document).ready(function(){
  
  $('.download').click(function(){
    var fileName=$(this).parent().attr('data-filename');
    console.log(fileName);
    //can insert download function here
    })
  
   $('.rename').click(function(){
    var fileName=$(this).parent().attr('data-filename');
    console.log(fileName);
     //can insert rename function here
    })

  })

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