Q&A
クリッカブルな10個のli要素を1つクリックすると1の番号が表示され,2個目をクリックすると2というふうにli要素中に番号を表示する方法はどのようにすればよろしいでしょうか？
仮に100個選択すると100番目まで番号をふれるようにしたいです。
また、その各番号に応じた拡大図を横に表示できるように、引数のような数値を組み込んだものにしたいです。
ご教授ください。
回答2件
0
ベストアンサー
jquery使えればindexでいいと思います。
idに規則があればそこからでもいいと思います。
HTML
1<!doctype html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style type="text/css"> 7 li { 8 width: 100px; 9 height: 30px; 10 display: block; 11 line-height: 2; 12 border: 1px solid #f77; 13 margin: 10px; 14 text-align: center; 15 } 16 17 </style> 18 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 19</head> 20<body> 21 <ul> 22 <li id="test0">0番目</li> 23 <li id="test1">1番目</li> 24 <li id="test2">2番目</li> 25 <li id="test3">3番目</li> 26 <li id="test4">4番目</li> 27 <li id="test5">5番目</li> 28 <li id="test6">6番目</li> 29 <li id="test7">7番目</li> 30 <li id="test8">8番目</li> 31 <li id="test9">9番目</li> 32 </ul> 33</body> 34</html> 35 36<script> 37 $("li").click(function(){ 38 alert($("li").index(this)); 39 //alert($(this).attr("id").replace("test","")); 40 }); 41</script>
投稿2017/12/27 01:02
総合スコア3828
0
ちょっと仕様がわかりづらいのですが、
予めliに連番を埋め込んでしまうとラクかもしれません
こんな感じでしょうか？
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 var num=0; 3 Array.prototype.map.call(document.querySelectorAll('li'),function(x){ 4 num++; 5 x.setAttribute("data-num",num); 6 x.addEventListener('click',function(e){ 7 e.target.textContent=e.target.getAttribute("data-num"); 8 }); 9 }); 10});
HTML
1<ul> 2<li></li> 3<li></li> 4<li></li> 5<li></li> 6</ul>
投稿2017/12/27 01:12
総合スコア114779
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。