如何在Vanilla JS中使用jquery内容

debugcn 发表于 Dev

用户名

我正在尝试使它编写的这段代码不依赖于访问dom来使用其内容。在使用jquery之前，我已经访问过dom，并且我希望能够使用我编写的jquery，而不是编写新代码来访问它。到目前为止，这是我的代码：

  constructor($navigation, $content) {

    if ($navigation.length == 0 || $content.length == 0) {
      return;
    }

    var nav1 = document.getElementById("main-nav");
    var btns = nav1.getElementsByClassName("nav");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function () {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }
    $navigation.on('click', 'li', function () {
      $content.hide();
      $($content[$(this).index()]).show();
    });
  }

这是我在另一个文档中访问dom的位置：

   new Faq($("#main-nav"), $("div[class='faq-container']"));

我想做的是使var nav1和var btns可以使用$ navigation和$ content，而不是直接访问dom。我是否必须以某种方式将此代码转换为jquery？我将如何处理？

自由度

将问题读为：

我已经使用jquery访问过DOM，并且希望能够在香草javascript中使用此变量，而不是第二次访问DOM。

要从jquery对象获取DOM节点，请添加[0]或.get(0)

function example(jqueryObj)
{
    jqueryObj[0].innerText = "set via [0]";
}

example($("#div"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>

特定于该问题，要在$("#main-nav")和doc.getElementById("main-nav")等价物之间进行转换，可以使用

var nav1 = $navigation[0]

另外，这是您的功能jquery-ified

constructor(navigation, content) {

  if (navigation.length == 0 || content.length == 0) {
    return;
  }
  
  navigation.on("click", ".nav", function() {
      $("nav.active").removeClass("active");
      $(this).addClass("active");
  });

  navigation.on('click', 'li', function() {
    content.hide();
    $(content[$(this).index()]).show();
  });
}

new Faq($("#main-nav"), $("div.faq-container"));

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。