傳輸內嵌硬編碼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的項目添加到它們中。目前有6個li的ID爲＃portfolio-（number），每個id的ID爲＃work-（number）。

我想要這樣做的原因首先是整理代碼並使其更具可重用性。但是，由於該網站是響應式的，我需要根據窗口寬度調整偏移值。

相應的隱藏內容也需要從變量中起作用，與硬編碼相反。這方面的一個例子是：

<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; 

任何幫助表示讚賞！

Demo is here

PS - 我可以處理第二部分

PPS（根據窗口寬度等將偏移值） - 我與JS新手，所以請溫柔:)

Answer 1

如果我是你，我會清楚的一點點添加到代碼：

var _getInnerWidth = function() { 

    if(typeof window.innerWidth !== 'undefined'){ 
     innerWidth = window.innerWidth; 
    } else { 
     innerWidth = document.documentElement.clientWidth; 
    } 

    return innerWidth; 
} 

你的代碼應工作原樣。我試了一下，然後回到了我的身邊。1704.

我在這裏附上一個笨蛋，以我根據你所做的事情的描述構建的東西爲例。希望它可以幫助

http://plnkr.co/edit/KXNGL089UIvfNlRmO2cC