前提
WordPressでアーカイブページを作成しており、コンテンツはカード型で配置して実装を進めてます。
アーカイブページのカードは昇順で並べており、それぞれにナンバーを振るようにしてます。
投稿順に1、2、3と割り振られるように設定。(PHPで処理)
実現したいこと
- PHPで処理した番号をJavaScriptで番号を書き換えたい(数値が「1」なら「01」という風にゼロパディングをしたい)
発生している問題・エラーメッセージ
query Selectorで取得して実行してみると1番先頭の要素のみゼロパディングができたが、2番目以降の番号が変更されない。 query Selector Allで全ての番号を取得して書き換える方法を調べてみたがうまくできず詰まっています。
該当のソースコード
PHP
1<p class="p-archive__text--num"> 2[ No.<span class="js-num-target"> 3<?php 4 $paged = get_query_var('paged'); 5 $perPage = get_query_var('posts_per_page'); 6 $paged === 0 ? $paged = 1 : $paged = get_query_var('paged'); 7 $count = $wp_query->current_post + 1; 8 echo ($paged - 1) * $perPage + $count;?> 9 </span> ] 10</p>
JavaScript
1window.addEventListener("DOMContentLoaded", function () { 2 const noteNumber = document.querySelector(".js-num-target"); 3 const numberText = noteNumber.innerHTML; 4 const num = Number(numberText); 5 6 number = ("00" + num).slice(-2); 7 8 document.querySelector(".js-num-target").innerHTML = number; 9});
querySelectorAllを使ったやり方が理解できていない部分があります。
熟練者の方、お手数お掛けしますがご教授をお願いいたします。
回答1件