現在Webaアプリケーションを作成しながらプログラミングの学習をしているものです。
JQueryのSortableを使用して、li要素の並び替えを行なっております。
下記のソースコードは、要素をドラッグして任意に並び替えた後、要素クリックでコンソールに、innerHTMLを出力するコードになります。
しかし、要素を並び替えた後、クリックすると違う要素の情報が取得されてしまいます。どのような実装をすれば良いかご教授いただければ幸いです。
for文はページを開いた一度目しか実行されないため、要素の順番が変わるとそこに誤差が生じているのだと思いますが、上記のソースコード以外での実装が調べても見当つかない状態です。
$(function () {
// リストを並べ替え可能に
$('#sortable').sortable({
// updateで並べ替えるたびに更新
update: function () {
// toArrayで現在の順番を取得し出力
$('#log').text($('#sortable').sortable('toArray'));
},
});
});
window.addEventListener('load', function () {
let sortable = document.getElementById('sortable');
let liClass = document.getElementsByClassName('liClass');
for (let i = 0; i < liClass.length; i++) {
liClass[i].addEventListener('click', function (e) {
console.log(`${liClass[i].innerHTML}`);
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>サンプル Sortable</title>
<!-- jQuery、jQuery UIの読み込み -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Sortableの実装 -->
<body>
<!-- リストにid属性を追加 -->
<ul id="sortable">
<li class="liClass" id="1">項目1</li>
<li class="liClass" id="2">項目2</li>
<li class="liClass" id="3">項目3</li>
<li class="liClass" id="4">項目4</li>
<li class="liClass" id="5">項目5</li>
</ul>
<p>リストの順番は「<span id="log"></span>」です</p>
</body>
</head>
</html>