どこのファイル名をhtmlのliタグに格納できますか？

Question

多くのファイルをliタグでリストしていますが、ファイルを削除して名前を変更することができますので、ファイル名をコードに格納します。

liはhtml5の値プロパティを持っていません。 html？ありがとう！

<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>

Answer 2

使用データ-X xは、あなたが保存したいデータです。

<li data-filename="myfilename.jpg"> 
    <span onclick="Download()">Download</span> 
    <span onclick="Rename()">Rename</span> 
</li>