0

我有以下代码：

      <!-- 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) 的 li 都有相应的隐藏内容。

我想要这样做的原因首先是整理代码并使其更具可重用性。而且，由于站点响应迅速，我需要根据窗口宽度调整偏移值。

相应的隐藏内容也需要使用变量而不是硬编码。这方面的一个例子是：

<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 - 我可以处理第二部分（根据窗口宽度添加偏移值等）

PPS - 我是 js 的新手，所以请温柔:)

4

1 回答 1

1

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

var _getInnerWidth = function () {

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

    return innerWidth;
}

您的代码应该按原样工作。我试了一下，1704还给我。

我在这里附上了一个 plunker，有一个我根据你在做什么的描述构建的东西的例子。希望能帮助到你

http://plnkr.co/edit/KXNGL089UIvfNlRmO2cC

于 2013-09-25T14:45:03.203 回答