有人可以幫我在 javascript 中寫這個嗎

Question

我正在嘗試從 jquery 在 javascript 中編寫此代碼

我已經嘗試過，但似乎無法等同於工作。

$(document).ready(function() {

  $('a').click(function() {

    var selected = $(this);
    $('a').removeClass('active');
    $(selected).addClass('active');
  });

  var $a = $('.a'),
    $b = $('.b'),
    $c = $('.c'),
    $d = $('.d'),
    $home = $('.home'),
    $about = $('.about');

  $a.click(function() {

    $home.fadeIn();
    $about.fadeOut();
  });

  $b.click(function() {

    $home.fadeOut();
    $about.fadeIn();
  });
});

該代碼在 jQuery 中完美運行，但我試圖只使用 javascript。 它基本上是在選擇導航項時添加和刪除 class 。 我不知道我是否盡可能清楚地解釋，但我嘗試在 javascript 中寫出與此等效的內容。

這是我嘗試過的。

var回調=函數（）{

 var clickHandler1 = function() { 

        document.getElementById("home").classList.remove("home"); 

       //var rem = document.getElementById("home");
       //fadeOut(rem);
       //alert("I am clicked B");
};

var anchors1 = document.getElementsByClassName("b");
for (var i = 0; i < anchors1.length; i++) {
        var current = anchors1[i];
        current.addEventListener('click', clickHandler1, false);
}

function fadeOut(el){
    el.style.opacity = 1;

    function fade() {
        if ((el.style.opacity -= .1) < 0) {
             el.style.display = "none";
        } else {
             requestAnimationFrame(fade);
          }
        })();
    };              

    fadeIn(el, display){
        el.style.opacity = 0;
        el.style.display = display || "block";

        (function fade() {
             var val = parseFloat(el.style.opacity);
             if (!((val += .1) > 1)) {
                 el.style.opacity = val;
                 requestAnimationFrame(fade);
             }
        })();
    };


 }

 if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {

  callback();

} else {

    document.addEventListener("DOMContentLoaded", callback);

}

Answer 1

es6中的代碼：

window.onload = function() {
  const allLinks = document.querySelectorAll('a')

  console.log(allLinks)

  const removeAllClass = () => {
    allLinks.forEach(link => {
      link.classList.remove('active')
    })
  }


  allLinks.forEach(element => {
    element.addEventListener('click', event => {
      removeAllClass()
      element.classList.add('active')
    })
  })

  let $a = document.querySelectorAll('.a'),
  $b = document.querySelectorAll('.b'),
  $home = document.querySelector('.home'),
  $about = document.querySelector('.about');

  $a.forEach(element => {
    element.addEventListener('click', event => {
      $about.classList.remove('fadeIn');
      $home.classList.add('fadeIn');      
    })
  })

  $b.forEach(element => {
    element.addEventListener('click', event => {
      $home.classList.remove('fadeIn');
      $about.classList.add('fadeIn');
    })
  })

}

你可以看到https://codepen.io/rwladyka/pen/qBBBpvy

Answer 2

document.getElementsByClassName('a') 是 $('.a') 的 javascript 等價物