How to use same funtion for 2 different variable-CodePudding

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');
})

CodePudding user response：

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));

CodePudding user response：

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');
    }
}

CodePudding user response：

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');