質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1544閲覧

目次のアンカーリンクの自動生成がIE11で動かない

kaori_oka

総合スコア176

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/03/11 09:12

編集2020/03/11 10:06

前提・実現したいこと

ブログサイトを運営してまして、その中で、記事の目次を設置しております。
目次のリンクをクリックすると、当該見出しに遷移する一般的な作りです。
ベタ打ちすると間違いが多いので、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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

MDN にポリフィルが挙がっているので使ってみてはどうでしょうか?
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart#Polyfill

投稿2020/03/11 09:15

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaori_oka

2020/03/11 10:05

ご回答ありがとうございます!ポリフィル知らなかったのでありがたいです! いただいたページを参考に、コード足してみたのですが、この方法で合ってますでしょうか?? chromeでもIEでも動かなくなってしまいました。。。 「試したこと>ポリフィル」の箇所に追記しております。
x_x

2020/03/11 12:10

ポリフィルなので元のスクリプトは変える必要がありません。 ポリフィルを最初に読み込んでください。
kaori_oka

2020/03/12 01:35

ご確認ありがとうございます! 下記のように修正して解決しました! ``` // JavaScript Document $(function() { // 目次(Menu)IE11対応 // https://github.com/uxitten/polyfill/blob/master/string.polyfill.js // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart if (!String.prototype.padStart) { String.prototype.padStart = function padStart(targetLength, padString) { targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0; padString = String(typeof padString !== "undefined" ? padString : " "); if (this.length >= targetLength) { return String(this); } else { targetLength = targetLength - this.length; if (targetLength > padString.length) { padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed } return padString.slice(0, targetLength) + String(this); } }; } // 目次(Menu)にのaタグを探して[href]に[#case + 連番]を挿入 $(".listStyle09 li a").each(function(index) { $(this).attr("href", "#case" + (index + 1).toString().padStart(2, "0")); var menuIndex = menuIndex + 1; }); //「.menu_anchorlink」のclassのついた箇所に「caseXX」のidを付与する $(".menu_anchorlink").each(function(index) { $(this).attr("id", "case" + (index + 1).toString().padStart(2, "0")); var anchorpoint = anchorpoint + 1; anchorpoint = parseInt(anchorpoint); }); }); ```
guest

0

100足してtoStringして右から2文字とればよいのでは?

投稿2020/03/11 10:06

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaori_oka

2020/03/12 01:36

ご回答ありがとうございます! x_xさまの、ポリフィルを追記することで解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問