javascript - インラインのハードコードされた jQuery 関数を変数に転送する

Question

次のコードがあります。

      <!-- work item 1 -->
      <li id="portfolio-1" class="col-12  col-sm-6  col-md-6  col-lg-4">
        <figure class="box  box--sm  text-center">
            <h4 class="brand--font-standard">Project Title</h4>
              <div class="row">
              <div class="col-xs-offset-2  col-xs-8  col-sm-offset-1  col-sm-10  col-md-offset-2  col-md-8  col-lg-offset-3  col-lg-6">
                  <img src="img/globe.jpg" class="img-responsive" alt="globe">
                </div>
              </div>
            <figcaption>
              <p>Project comment</p>
              <a href="#" class="pull-right  brand--font" onclick="$('.work--detail').addClass('work--detail_show'); $('#work-2, #work-3, #work-4, #work-5, #work-6').hide(); $('#work-1').slideDown(); $('html, body').animate({scrollTop: $('.hidden-content-top').offset().top - 110 }, 1000); return false;">View</a>
            </figcaption>
        </figure>
      </li><!-- /work item 1 -->

ハードコーディングされないようにアンカータグのjsを書き直し、代わりに.hideを開く/追加する必要があるアイテムの変数を持ちたいと思っています。現在、#portfolio-(番号) の ID を持つ 6 つの li と、#work-(番号) の ID を持つそれぞれに対応する隠しコンテンツがあります。

私がこれをやりたい理由は、まずコードを整理して、もう少し再利用できるようにするためです。また、サイトはレスポンシブであるため、ウィンドウの幅に基づいてオフセット値を調整する必要があります。

対応する非表示のコンテンツも、ハードコードされているのではなく、変数から機能する必要があります。これの例は次のとおりです。

<a href="#" class="btn  btn--small  btn--grey  brand--font" onclick="$('#work-1').slideUp(); $('html, body').animate({scrollTop: $('#portfolio-1').offset().top - 140 }, 1000); $('.work--detail').removeClass('work--detail_show'); return false;">close</a>

私は現在、(ウィンドウ幅を取得するために)次の関数を持っています:

var _getInnerWidth = function () {
return typeof window.innerWidth !== 'undefined' ? window.innerWidth : document.documentElement.clientWidth;

どんな助けでも大歓迎です！

デモはこちら

PS - 2 番目の部分を処理できます (ウィンドウの幅に基づいてオフセット値を追加するなど)

PPS - 私はjsの初心者なので、優しくしてください:)