前提・実現したいこと
ブログサイトを運営してまして、その中で、記事の目次を設置しております。
目次のリンクをクリックすると、当該見出しに遷移する一般的な作りです。
ベタ打ちすると間違いが多いので、jQuery で自動で連番付与したアンカーリンクを実装したのですが、IE11 で動作しておりませんでした。
発生している問題・エラーメッセージ
オブジェクトは 'padStart' プロパティまたはメソッドをサポートしていません。
というエラーがデバッグツールのコンソールにて表示されます。
.padStart
のメソッドが IE で使用できないということかと思うのですが、
IE でも動く他のメソッドで代用できるのでしょうか??
該当のソースコード
js
1// 目次(Menu)にのaタグを探して[href]に[#case + 連番]を挿入 2$(".listStyle09 li a").each(function(index) { 3 $(this).attr("href", "#case" + (index + 1).toString().padStart(2, "0")); 4 var menuIndex = menuIndex + 1; 5}); 6 7//「.menu_anchorlink」のclassのついた箇所に「caseXX」のidを付与する 8$(".menu_anchorlink").each(function(index) { 9 $(this).attr("id", "case" + (index + 1).toString().padStart(2, "0")); 10 var anchorpoint = anchorpoint + 1; 11 anchorpoint = parseInt(anchorpoint); 12});
見出しは<h2>
、<h3>
、<h4>
など複数種類を使用するため、
ざっくりと.menu_anchorlink
をセレクタにしております。
試したこと
.padStart(2, "0")
を削除すればひとまず動作するのですが、
外部からこの位置にリンクされている可能性も考えて、
出来れば 2 桁の 0 詰めしたいのですが、
この方法知ってる方いらっしゃったら教えていただきたいです。
ちなみに 2 桁の 0 詰めなのは、当初はコーディング合せでこだわりはなかったです。
ポリフィル
ポリフィルのご紹介いただいて、入れてみました。
chromeとIE11どちらでも動かなくなってしまいました。
使用方法が間違ってますでしょうか??
js
1// JavaScript Document 2$(function() { 3 // 目次(Menu)IE11対応 4 // https://github.com/uxitten/polyfill/blob/master/string.polyfill.js 5 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart 6 if (!String.prototype.padStart) { 7 String.prototype.padStart = function padStart(targetLength, padString) { 8 targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0; 9 padString = String(typeof padString !== "undefined" ? padString : " "); 10 if (this.length >= targetLength) { 11 return String(this); 12 } else { 13 targetLength = targetLength - this.length; 14 if (targetLength > padString.length) { 15 padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed 16 } 17 return padString.slice(0, targetLength) + String(this); 18 } 19 }; 20 } 21 22 // 目次(Menu)にのaタグを探して[href]に[#case + 連番]を挿入 23 $(".listStyle09 li a").each(function(index) { 24 $(this).attr( 25 "href", 26 "#case" + (index + 1).toString().String.prototype.padStart(2, "0") 27 ); 28 var menuIndex = menuIndex + 1; 29 }); 30 31 //「.menu_anchorlink」のclassのついた箇所に「caseXX」のidを付与する 32 $(".menu_anchorlink").each(function(index) { 33 $(this).attr( 34 "id", 35 "case" + (index + 1).toString().String.prototype.padStart(2, "0") 36 ); 37 var anchorpoint = anchorpoint + 1; 38 anchorpoint = parseInt(anchorpoint); 39 }); 40});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/11 10:05
2020/03/11 12:10
2020/03/12 01:35