Home/ Questions/Q 8694767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:51:48+00:00

I am trying to implement a script to set different class name on a

  • 0

I am trying to implement a script to set different class name on a specific element…

Let’s suppose the dom looks like this:

<body class='pre-existing-class-name'>

If I make 

smartToogle('body', 'new-class');
// the dom should look like this
// <body class='pre-existing-class-name new-class'>
smartToogle('body', 'new-class-2');
// the dom should look like this
// <body class='pre-existing-class-name new-class-2'>

I did the following code but it does not work: 

var smartToogle = function (element, newClassName) {
    var oldClassName;
    var $element = $(element);

    $element.addClass(newClassName);
    if (oldClassName !== newClassName) {
        $element.removeClass(oldClassName);
    }
    oldClassName = newClassName;
};

Requirements:
1) I am using query
2) I would like to pass just one class name, the new one.

Solution:
The following code works but I do not like it because it uses global variable.
Any hint to fix it? 

function myToggle(newClassName) {
    if (window.oldClassName) {
         $('body').toggleClass(window.oldClassName);
    }
    window.oldClassName = newClassName;
    $('body').toggleClass(newClassName);
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use data attribute for the element, that is accessible using 

    $(element).data(attrib_name)

    Just a small change is required in your method

    function myToggle(newClassName) {
    if (window.oldClassName) {
         $('body').toggleClass(window.oldClassName);
    }
    window.oldClassName = newClassName;
    $('body').toggleClass(newClassName);
}

    can be replaced with 

    function myToggle(element, newClassName) {
    if ($(element).data('oldClassName')) {
         $(element).toggleClass($(element).data('oldClassName'));
    }
    $(element).data('oldClassName', newClassName)
    $(element).toggleClass(newClassName);
}

    Hope this solves it for you.

    • 0