javascript IEで動かない時の対処法を教えてください。

webデザイナーです。
コーディングは苦手です。
下記サイト（jQueryを使用した「ボタンを押す度に要素を増やす」アクションの実装）を参考に実装を試みましたが
IEでの動作が確認できませんでした。
何かバグがあるのでしょうか？
教えて下さい。
宜しくお願いします。

https://qiita.com/kuma-shin/items/d26718d226373c251a31

追記
---------HTML---------

<!DOCTYPE html>
<html lang="ja">
<head>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery.1.11.3.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</head>
<body>
    <div class="cont_01">
      <img src="img/dummy_01.png" alt="ダミー画像01">
    </div>
    <div class="cont_02">
      <img src="img/dummy_02.png" alt="ダミー画像02">
    </div>
    <div class="cont_03">
      <img src="img/dummy_03.png" alt="ダミー画像03">
    </div>
    <div class="cont_04">
      <img src="img/dummy_04.png" alt="ダミー画像04">
    </div>
    <a id="ClickBtn">もっと見る<br>&#8744;</a>
</section>
</body>
</html>

---------JS---------

jQuery(function ($) {
    var i = 1;
    $('.cont_02').hide();
    $('.cont_03').hide();
    $('.cont_04').hide();
    $('#ClickBtn').on('click', function () {
        i += 1;

<!--ここの部分【${i}】にエラーが出ています。-->
        $(`.cont_0${i}`).fadeIn('slow');
        if (i == 4) {
            $('#ClickBtn').hide();
        };
    });
});

追記20180412
コンソール
文字が正しくありません。ファイル: common.js、行: 8、列: 11

m.ts10806

2018/04/12 06:46

エラー内容を追記してください。

48ta

2018/04/12 06:53

文字が正しくありません。ファイル: common.js、行: 8、列: 11

m.ts10806

2018/04/12 07:02

質問本文に追記してください。ここでは埋もれます。また、コードは全体をコードブロックとしてください。なぜか一部のみになっていますが、これでは正しいコードを認識できません。質問編集画面ではリアルタイムにプレビューがでるのでそちらを見ながら調整してください。

m.ts10806

2018/04/12 07:06

というか、これ、参照サイトが文法ミスってる気がしますね。１年以上前の記事なのに誰も支持してませんし、指摘もされてないようなので、失礼ながら記事の質がお世辞にも高いとは言えないように感じました。

行動規範の内容に同意します

回答2件

IEにも対応させるにはこうですね。
参照先の記事はIE非対応の書き方になってます。
参考リファレンス

javascript
1$('.cont_0'+i).fadeIn('slow');

クォートにすべきところ、バッククォートになっている
→シングルクォートに

変数を＄{}で参照しようとしている
→javascriptの変数と文字接続に

投稿2018/04/12 07:12

編集2018/04/12 07:47

m.ts10806

総合スコア80875

x_x

2018/04/12 07:28

別にPHPと混同しているわけではなく、IEを捨てているだけだと思いますよ。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

m.ts10806

2018/04/12 07:29

なるほど。補足ありがとうございます。 URL拝借して回答に追記させていただきます。

48ta

2018/04/12 07:39

ご回答ありがとうございます！試してみたのですが、クロームでも動作確認ができなくなりました。「もっと見る」ボタンが消えてしまいます。隠れているコンテンツも表示されませんでした。

m.ts10806

2018/04/12 07:49

あ、そうですねすみませんクラス名のアンダーバーが抜けてました。回答のソース修正しています。

48ta

2018/04/12 08:12

ご指導ありがとうございました！

行動規範の内容に同意します

ベストアンサー

全般的に非効率な処理がめだちます
これくらいまでは簡素化できます
あとは構造や属性の付け方を工夫すればもっとよくなるでしょう

javascript
1$(function(){
2  var i = 1;
3  $('.cont_02,.cont_03,.cont_04').hide();
4  $('#ClickBtn').on('click', function () {
5    i++;
6    $('.cont_0'+i).fadeIn('slow');
7    $(this).toggle(i < 4);
8  });
9});
10