jQuery 至 Javascript/Vue

Question

我想创建一个可以使用 mark.js mark.js web page.

跳转到其匹配项的自定义搜索框

他们这里有一个例子： https://jsfiddle.net/julmot/973gdh8g/

但是是用jQuery写的。

我尝试将它转换为 JS/Vue（使用 Quasar），但现在我无法让它工作。没有错误，也没有亮点。

我更新了 jQuery 行，例如：

$prevBtn = $("button[data-search='prev']")

至：

prevBtn = document.querySelector('#prev')

还有这些，其他的不知道怎么转换，比如：

$nextBtn.add($prevBtn).on("click", function() {})

这是我的fiddle（简化版，但还没有完全完成，输入后一定要点击“搜索”）： https://codepen.io/keechan/pen/JjWEYmP?editors=1111

我错过了什么？请帮忙！

Answer 1

我使用纯 JavaScript 重写了他们的 jQuery 示例。

您应该能够比较这两个示例，了解各种 jQuery 函数如何转换为 JavaScript，然后将它们实现到您的 Vue 项目中。

https://jsfiddle.net/75qyu3j8/

我尽量保持变量名相同，这样更容易理解。

document.body.onload = function() {

  // the input field
  var $input = document.querySelector("input[type='search']"),
    // clear button
    $clearBtn = document.querySelector("button[data-search='clear']"),
    // prev button
    $prevBtn = document.querySelector("button[data-search='prev']"),
    // next button
    $nextBtn = document.querySelector("button[data-search='next']"),
    // the context where to search
    $content = document.querySelector(".content"),
    $contentMark = new Mark($content),
    // jQuery object to save <mark> elements
    $results,
    // the class that will be appended to the current
    // focused element
    currentClass = "current",
    // top offset for the jump (the search bar)
    offsetTop = 50,
    // the current index of the focused element
    currentIndex = 0;
    

  /**
   * Jumps to the element matching the currentIndex
   */
  function jumpTo() {
    if ($results.length) {
      var position,
        $current = $results[currentIndex];
      $results.forEach($result => $result.classList.remove(currentClass));
      
      if ($current) {
        $current.classList.add(currentClass);
        position = $current.offsetTop - offsetTop;
        window.scrollTo(0, position);
      }
    }
  }

  /**
   * Searches for the entered keyword in the
   * specified context on input
   */
  $input.addEventListener("input", function() {
    var searchVal = this.value;
    $contentMark.unmark({
      done: function() {
        $contentMark.mark(searchVal, {
          separateWordSearch: true,
          done: function() {
            $results = $content.querySelectorAll("mark");
            currentIndex = 0;
            jumpTo();
          }
        });
      }
    });
  });

  /**
   * Clears the search
   */
  $clearBtn.addEventListener("click", function() {
    $contentMark.unmark();
    $input.value = ""
    $input.focus();
  });

  /**
   * Next and previous search jump to
   */
  $nextBtn.after($prevBtn);
  
  function prevNextHandler() {
    if ($results.length) {
      currentIndex += (this.dataset.search === "prev" ? -1 : 1);
      if (currentIndex < 0) {
        currentIndex = $results.length - 1;
      }
      if (currentIndex > $results.length - 1) {
        currentIndex = 0;
      }
      jumpTo();
    }
  }
  $nextBtn.addEventListener("click", prevNextHandler);
  $prevBtn.addEventListener("click", prevNextHandler);
};

mark {
  background: yellow;
}

mark.current {
  background: orange;
}

.header {
  padding: 10px;
  width: 100%;
  background: #eee;
  position: fixed;
  top: 0;
  left: 0;
}

.content {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="header">
  Search:
  <input type="search" placeholder="Lorem">
  <button data-search="next">&darr;</button>
  <button data-search="prev">&uarr;</button>
  <button data-search="clear">✖</button>
</div>

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ullamcorper orci, eget porttitor justo. Aliquam id sollicitudin elit. Nulla in sodales ipsum. Donec vulputate venenatis magna. Vestibulum sit amet leo lacinia, cursus lectus in, gravida
    metus. In ultricies sed tortor non pellentesque. Mauris quis tempor neque. Donec nec sagittis magna. Integer fringilla posuere metus eu mollis. Ut ac porta metus. Duis sed lacinia metus. Nunc malesuada iaculis risus vitae bibendum.
  </p>

  <p>
    Vivamus posuere condimentum leo eu hendrerit. Pellentesque placerat iaculis ante a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu ipsum ac magna congue congue sed maximus tortor. Vivamus id odio elementum, vehicula nunc
    ut, efficitur felis. Nullam hendrerit velit libero, gravida porttitor tortor ullamcorper eu. Ut ut lectus non enim sagittis aliquam quis in orci. Donec a arcu eu eros cursus cursus. Donec dictum dignissim tellus, dictum egestas purus pellentesque
    sed.
  </p>

  <p>
    Vestibulum eu ornare urna, nec aliquam lectus. Phasellus eu odio sapien. Vestibulum eu turpis at lorem sagittis posuere. Quisque tellus nunc, facilisis id lacus nec, ornare rhoncus elit. Vivamus vehicula eros a condimentum venenatis. Sed orci massa, pulvinar
    sed erat nec, pellentesque suscipit leo. Mauris lobortis tincidunt nunc, sed tempus ex congue vitae. Curabitur lobortis mauris in ex malesuada, quis vehicula neque lobortis. Curabitur aliquam porttitor tellus eget tempus. Donec maximus tempus tristique.
    Aliquam tincidunt odio dictum, scelerisque ipsum ut, facilisis quam. Ut nec malesuada neque.
  </p>

  <p>
    Proin felis eros, tincidunt vitae scelerisque sit amet, dictum nec ante. Praesent tincidunt ac lacus nec elementum. Vivamus sed gravida purus, sed efficitur tortor. Nulla non molestie arcu. Sed tincidunt consectetur ligula sed lobortis. In non sapien
    ac urna lacinia placerat sed nec lacus. Aenean lobortis tincidunt sapien a hendrerit. Quisque eu turpis accumsan nisl blandit efficitur.
  </p>

  <p>
    Nam sit amet pellentesque est. Sed ligula turpis, ultricies sit amet mattis elementum, tristique non risus. Phasellus at congue ex. Proin nisi leo, vestibulum vitae accumsan in, imperdiet id dolor. Quisque at blandit nisl. Class aptent taciti sociosqu
    ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eget metus augue. Morbi faucibus venenatis sapien, fermentum porttitor felis pharetra a. Nam interdum nibh tortor, quis maximus turpis blandit eget. Praesent in feugiat neque, sed
    vulputate quam. Curabitur erat quam, efficitur et congue quis, iaculis euismod libero. Quisque odio sapien, efficitur non mauris ac, tincidunt condimentum turpis.
  </p>

  <p>
    Maecenas dapibus aliquam vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis viverra leo quis porta. Sed sit amet porttitor quam. Fusce nec risus non augue consectetur ultricies. Aliquam
    elit lorem, tincidunt ac dolor vel, vulputate consectetur ex. In hac habitasse platea dictumst. Sed eget nisl aliquam, cursus odio nec, commodo lorem. Nulla mollis tortor eu odio rutrum vulputate. Donec condimentum molestie mauris, nec sodales nisi
    volutpat aliquam. Nulla mollis libero sed nibh volutpat, ac mollis elit tincidunt. Vestibulum cursus velit vitae felis aliquam ultricies. Donec vehicula dictum feugiat. Vestibulum volutpat sollicitudin sagittis.
  </p>

  <p>
    Aliquam consequat, diam eu ullamcorper porta, diam eros rhoncus turpis, in rutrum sem diam a risus. Duis lacinia velit sed ante feugiat venenatis. Aenean orci leo, dictum non finibus nec, dignissim quis eros. Nullam sit amet orci ac purus blandit commodo
    sit amet eget neque. Sed pellentesque dictum tortor. Ut dui erat, tempus in odio in, aliquet convallis mi. Morbi efficitur justo ante, quis ultricies turpis suscipit ac. Sed sit amet nisl rutrum, laoreet mauris id, ullamcorper orci. In facilisis nisi
    eget fringilla imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ut ultricies dui. Pellentesque elit urna, imperdiet sed congue eget, hendrerit sed urna.
  </p>

  <p>
    Proin vel hendrerit nulla. Vivamus vehicula nibh nec lorem blandit, quis aliquam ipsum suscipit. Nulla at vestibulum felis. Aenean ac nibh eget enim molestie pulvinar. Duis nulla justo, tristique id nulla nec, faucibus imperdiet arcu. In vel pretium dui,
    at lobortis sapien. Phasellus ullamcorper id enim eget dictum. Ut imperdiet rutrum est a rutrum. Curabitur eget dignissim tellus. Fusce tempus leo nisl, vitae auctor diam feugiat sit amet. Vestibulum accumsan justo eget odio imperdiet, consectetur
    efficitur ex dapibus.
  </p>

  <p>
    Sed pharetra odio a nibh pharetra rutrum. Suspendisse ut ullamcorper lectus. Donec ipsum mauris, congue et lobortis sit amet, ultricies ac tellus. Sed nisi risus, condimentum at varius quis, condimentum ac velit. In condimentum, magna sed ornare eleifend,
    dolor nulla mollis felis, quis feugiat elit turpis non ipsum. Etiam aliquam est imperdiet dolor rutrum, at varius leo sodales. Morbi quis iaculis metus.
  </p>

  <p>
    Maecenas auctor nec ligula ac luctus. Nam sit amet euismod mauris. Donec et diam sit amet eros efficitur tempor. Mauris non erat sit amet nunc interdum pulvinar. Sed luctus hendrerit justo eget pulvinar. Cras non arcu sed ligula faucibus pulvinar. Sed
    egestas risus nisl. Duis quis arcu tempus, cursus erat ac, gravida enim. Cras et condimentum ante. Nullam eleifend egestas velit, quis semper est imperdiet non. Donec quis purus varius, placerat mi et, dictum lorem. Sed quis finibus nisi, vitae molestie
    metus. Donec lobortis eros quis vestibulum vulputate.
  </p>
</div>

jQuery 至 Javascript/Vue

jQuery to Javascript/Vue

javascript

jquery

vue.js

mark.js