javascript - 将内联硬编码jQuery函数传输到变量

我有以下代码：

      <!-- 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个ID为＃portfolio-（number）的li，每个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的新手，所以请保持柔和:)

最佳答案

如果我是你，我会在代码中添加一些清晰度：

var _getInnerWidth = function () {

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

    return innerWidth;
}

您的代码应按原样工作。我尝试了一下，然后回到1704。

我在这里附上一个小矮人，并举例说明我根据您正在做的事情构建的东西。希望能帮助到你

http://plnkr.co/edit/KXNGL089UIvfNlRmO2cC

关于javascript - 将内联硬编码jQuery函数传输到变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19007846/