Преобразование JQ в Js

Question

я не могу добавить библиотеку Jquery моих кодов, и я должен использовать JS код
может кто-нибудь помочь мне с конвертированием следующий код JS
спасибо ..

<script type="text/javascript"> 
    $(function(){ 
     $("#gorightslide").click(function(){ 
      if(!$(this).is('.diactiveisbtn')){ 
       $(this).addClass('diactiveisbtn'); 
       $("#goleftslide").removeClass('diactiveisbtn'); 
       $("#oneblockshowblog").css({display:'none'}); 
       $("#twoblockshowblog").fadeIn(500); 
      } 
     }); 
     $("#goleftslide").click(function(){ 
      if(!$(this).is('.diactiveisbtn')){ 
       $(this).addClass('diactiveisbtn'); 
       $("#gorightslide").removeClass('diactiveisbtn'); 
       $("#twoblockshowblog").css({display:'none'}); 
       $("#oneblockshowblog").fadeIn(500); 
      } 
     }); 
    }); 
</script> 

Answer 1

Вы можете попробовать это:

$(function(){ 
    document.getElementById("gorightslide").click(function(){ 
     if(!hasClass(this, 'diactiveisbtn')){ 
      this.className += " diactiveisbtn"; 
      document.getElementById("goleftslide").className = document.getElementById("goleftslide").className.replace(/\diactiveisbtn\b/,''); 
      document.getElementById("oneblockshowblog").style.display = "none"; 
      fadeIn(document.getElementById("twoblockshowblog")); 
     } 
    }); 
    document.getElementById("goleftslide").click(function(){ 
     if(!hasClass(this, 'diactiveisbtn')){ 
      this.className += " diactiveisbtn"; 
      document.getElementById("gorightslide").className = document.getElementById("gorightslide").className.replace(/\diactiveisbtn\b/,''); 
      document.getElementById("twoblockshowblog").style.display = "none"; 
      fadeIn(document.getElementById("oneblockshowblog")); 
     } 
    }); 
}); 

function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
} 

function fadeIn(el) { 
    el.style.opacity = 0; 

    var last = +new Date(); 
    var tick = function() { 
    el.style.opacity = +el.style.opacity + (new Date() - last)/400; 
    last = +new Date(); 

    if (+el.style.opacity < 1) { 
     (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); 
    } 
    }; 

    tick(); 
} 

Answer 2

У вас есть недоразумение, JQuery сделал это с помощью javascript, поэтому ваш код уже находится в javascript. Если вы хотите использовать этот код в одной функции, вам нужно только удалить первую строку, она будет выглядеть следующим образом:

<script type="text/javascript"> 
    function callingPlugin(){ 
     $("#gorightslide").click(function(){ 
      if(!$(this).is('.diactiveisbtn')){ 
       $(this).addClass('diactiveisbtn'); 
       $("#goleftslide").removeClass('diactiveisbtn'); 
       $("#oneblockshowblog").css({display:'none'}); 
       $("#twoblockshowblog").fadeIn(500); 
      } 
     }); 
     $("#goleftslide").click(function(){ 
      if(!$(this).is('.diactiveisbtn')){ 
       $(this).addClass('diactiveisbtn'); 
       $("#gorightslide").removeClass('diactiveisbtn'); 
       $("#twoblockshowblog").css({display:'none'}); 
       $("#oneblockshowblog").fadeIn(500); 
      } 
     }); 
    }; 
    callingPlugin(); // <-- Will execute the code 
</script> 

Answer 3

Попробуйте

function yourfunction() { 
    document.getElementById("gorightslide").onclick = function(event) { 
    if(event.target.className != "diactiveisbtn"){ 
     event.target.classList = "diactiveisbtn"; 
     document.getElementById("goleftslide").classList = ""; 
     document.getElementById("oneblockshowblog").style.display = "none"; 
     document.getElementById("twoblockshowblog").style.display = "block"; // you can add here css animation (@keyframe) 
    } 
    } 
    document.getElementById("goleftslide").onclick = function(event) { 
    if(event.target.className != "diactiveisbtn"){ 
     event.target.classList = "diactiveisbtn"; 
     document.getElementById("gorightslide").classList = ""; 
     document.getElementById("twoblockshowblog").style.display = "none"; 
     document.getElementById("oneblockshowblog").style.display = "block"; // you can add here css animation (@keyframe) 
    } 
    } 
}