jquery：ボタンをクリックしたラベルを取得する方法は？

Question

私は多くのラベルと1つの入力ファイルを持っています。

<label for="uploadFile" data-albumid="1">upload Here</label> 
<label for="uploadFile" data-albumid="2">upload Here</label> 
<label for="uploadFile" data-albumid="3">upload Here</label> 
<input id="uploadFile" type="file" style="display:hidden"> 
$('#uploadFile').on('change', function(e) { 
// how to get the albumid data here ? 
}); 

Answer 1

ラベルのクリックハンドラを入れて、それが.data()を使用してinput要素に選択肢を関連付けています。

var albumId; 
 
$('label').click(function() { 
 
    albumId = $(this).data("albumid"); 
 
    $('#' + this.htmlFor).data('albumid', albumId); 
 
}); 
 

 
$('#uploadFile').on('change', function(e) { 
 
    alert("Changing album " + $(this).data('albumid')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="uploadFile" data-albumid="1">upload #1</label><br> 
 
<label for="uploadFile" data-albumid="2">upload #2</label><br> 
 
<label for="uploadFile" data-albumid="3">upload #3</label> 
 
<input id="uploadFile" type="file" style="display: none;">