Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

178
Visualizações
How to use same funtion for 2 different variable

Have to use same function with two different variable with querySelector attached to the variable. Following is the javascript.

var productLink = document.querySelector('.products-link');
var productOffcanvas = document.getElementById('offcanvasProducts')

productOffcanvas.addEventListener('show.bs.offcanvas', function () {
    element.classList.toggle('active');
})
productOffcanvas.addEventListener('hide.bs.offcanvas', function () {
    productLink.classList.toggle('active');
})


var solutionsLink = document.querySelector('.solutions-link');
var solutionsOffcanvas = document.getElementById('offcanvasSolutions')

solutionsOffcanvas.addEventListener('show.bs.offcanvas', function () {
    solutionsLink.classList.toggle('active');
})
solutionsOffcanvas.addEventListener('hide.bs.offcanvas', function () {
    solutionsLink.classList.toggle('active');
})
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

You can use same listner for both function and differentatie them with their class names.

const productLink = document.querySelector('.products-link');
const productOffcanvas = document.getElementById('offcanvasProducts');

productOffcanvas.addEventListener('show.bs.offcanvas', showOffCanvas);
productOffcanvas.addEventListener('hide.bs.offcanvas', hideOffCanvas);

const solutionsLink = document.querySelector('.solutions-link');
const solutionsOffcanvas = document.getElementById('offcanvasSolutions')

solutionsOffcanvas.addEventListener('show.bs.offcanvas', showOffCanvas);
solutionsOffcanvas.addEventListener('hide.bs.offcanvas', hideOffCanvas);

function showOffCanvas(e) {
    const classList = e.target.classList;
    if(classList.contains('products-link')) {
        productLink.classList.toggle('active');
    } else {
        solutionsLink.classList.toggle('active');
    }
}

function hideOffCanvas(e) {
    const classList = e.target.classList;
    if(classList.contains('products-link')) {
        productLink.classList.toggle('active');
    } else {
        solutionsLink.classList.toggle('active');
    }
}

about 4 years ago · Juan Pablo Isaza Relatório

0

Using a function which returns a function:

function func(link) {
    return () => link.classList.toggle('active');
}

Then:

productOffcanvas.addEventListener('show.bs.offcanvas', func(element));

productOffcanvas.addEventListener('hide.bs.offcanvas', func(productLink));

solutionsOffcanvas.addEventListener('show.bs.offcanvas', func(solutionsLink));

solutionsOffcanvas.addEventListener('hide.bs.offcanvas', func(solutionsLink));
about 4 years ago · Juan Pablo Isaza Relatório

0

You can use like:

function toggleCanvasVisibility(targetElement, el) {
  targetElement.addEventListener('show.bs.offcanvas', function () {
    el.classList.toggle('active');
  })
  targetElement.addEventListener('hide.bs.offcanvas', function () {
    el.classList.toggle('active');
  })
}

function findAndRegisterCanvasVisibility(canvasId, targetClass) {
  const element = document.querySelector(targetClass);
  const canvasElement = document.getElementById(canvasId);
  toggleCanvasVisibility(canvasElement, element);
}

// for product link

findAndRegisterCanvasVisibility('offcanvasProducts', '.products-link');


// for solutions

findAndRegisterCanvasVisibility('offcanvasSolutions', '.solutions-link');
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda