javascript - 在单页网站上替换 Div 的内容

Question

所以我一直在根据我在网上找到的模板构建一个网站，如果能帮助我实现我想要的功能，我将不胜感激。目前它设置了过滤器，允许您对多个缩略图进行排序。但是，我希望当前充当“过滤器”的链接代替显示所有缩略图的 div。

我在这里搜索了 jQuery，以替换 div 内容，包括替换 div 的内容，隐藏 div 并在单击时显示它们。不过，我似乎什么都没做。

理想情况下，我会将当前的 UL 包装在一个名为“designprojects”的 div 中，然后当我单击一个过滤器时，该 div 将被替换为具有以下内容的新过滤器里面有元素信息。

以下是该站点用于实现过滤器功能的当前 HTML 和 Javascript:

filter = function() {
  if ($('#projects').length > 0) {
    var $container = $('#projects');

    $container.imagesLoaded(function() {
      $container.isotope({
        // options
        animationEngine: 'best-available',
        itemSelector: '.item-thumbs',
        layoutMode: 'fitRows'
      });
    });


    // filter items when filter link is clicked
    var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

    $optionLinks.click(function() {
      var $this = $(this);
      // don't proceed if already selected
      if ($this.hasClass('selected')) {
        return false;
      }
      var $optionSet = $this.parents('.option-set');
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      // make option object dynamically, i.e. { filter: '.my-filter-class' }
      var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
      // parse 'false' as false boolean
      value = value === 'false' ? false : value;
      options[key] = value;
      if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
        // changes in layout modes need extra logic
        changeLayoutMode($this, options)
      } else {
        // otherwise, apply new options
        $container.isotope(options);
      }

      return false;
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Portfolio Projects -->
<div class="row">
  <div class="span3">
    <!-- Filter -->
    <nav id="options" class="work-nav">
      <ul id="filters" class="option-set" data-option-key="filter">
        <li class="type-work">Projects</li>
        <li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li>
        <li><a href="#filter" data-option-value=".StarbucksCSR">Starbucks CSR Project</a></li>
      </ul>
    </nav>
    <!-- End Filter -->

  </div>

  <div class="span9">
    <div class="row">
      <section id="projects">
        <ul class="thumbs">
          <!-- Item Project and Filter Name -->
          <li class="item-thumbs span3 StarbucksCSR">
            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Project Title" href="_include/img/work/full/url.jpg">
              <span class="overlay-img"></span>
              <span class="overlay-img-thumb font-icon-plus"></span>
            </a>
            <!-- Thumb Image and Description -->
            <img src="_include/img/work/thumbs/url.jpg" alt="Project info">
          </li>
          <!-- End Item Project -->

        </ul>
      </section>

    </div>
  </div>
</div>
<!-- End Portfolio Projects -->

回顾一下，当我单击“所有元素”时，我想查看可以单击并全屏显示的缩略图(当前功能，也希望这是默认设置)。

当我单击一个元素名称时，我希望将包含所有缩略图的 div 替换为有关该元素的段落，以及可以单击以扩展到全屏的其他缩略图。

我目前的进度可以在www.codyshipman.com看到

Answer 1

查看 jQuery 的 .html()功能。如果你想替换 <div> 的内容元素，将新内容作为参数传递给 .html(newContentAsString)功能，为此 <div>元素。看documentation了解更多信息。