Swap class name with jQuery

Asked

Viewed 417 times

1

I want to create with jQuery the contrast functionality, where the user clicking on a given button, the site would be dark and if you click again, it would return to normal. We bought a template that offers this functionality, but as follows:

inserir a descrição da imagem aqui

His code is like this:

    (function() {
        $('<div class="color-picker"><a href="#" class="handle"><i class="icofont icofont-color-bucket"></i></a><div class="settings-header"><h3>Painel de Controle</h3></div><div class="section"><h3 class="color">Cor:</h3><div class="colors"><a href="#" class="color-1" ></a></div></div><div class="section"><h3 class="color">Contraste:</h3><div><a href="#" class="color-inverse"><img class="img img-fluid img-thumbnail" src="assets/images/contraste.png" style="width: 50px" /></a></div></div></div>').appendTo($('body'));
    })();

$(".color-1").on('click',function() {
    $("#color").attr("href", "assets/css/color/color-1.css");
    return false;
});

$(".color-inverse").on('click',function() {
    $("#color").attr("href", "assets/css/color/color-inverse.css");
    return false;
});

I would like to center the clicks only on the contrast icon and remove the blue icon. For that, I tried that way, but it didn’t work:

$(".color-1").on('click',function() {
    $("#color").attr("href", "assets/css/color/color-1.css");
    return false;
});

$(".color-inverse").on('click',function() {
        $("#color").attr("href", "assets/css/color/inverse.css");
        var classe = $(this).attr("class");
        //alert(classe);

        if(classe == 'color-inverse'){
          var div = document.querySelector('div');
          div.classList.remove('color-inverse');
          div.classList.add('color-1');
        }else{
          var div = document.querySelector('div');
          div.classList.remove('color-1');
          div.classList.add('color-inverse');

        }
        return false;
    });
jquery

  • When you use document.querySelector('div') this will select the first DOM div, probably with the HTML/DOM reso inside, that’s what you want?

  • Hello Sergio. I managed to solve, I do not know if it was the right way, but it worked. Thank you.

1 answer

1

I got it solved. Follow the code:

(function() {
    $('<div class="color-picker"><a href="#" class="handle"><i class="icofont icofont-color-bucket"></i></a><div class="settings-header"><h3>Painel de Controle</h3></div><div class="section"><h3 class="color">Contraste:</h3><div><div class="colors"><a href="#" class="color-inverse"><img class="img img-fluid img-thumbnail" src="assets/images/contraste.png" style="width: 50px" /></a></div></div></div></div>').appendTo($('body'));
})();

$(".color-inverse").on('click',function() {
  var classe = $(this).attr("class");

    if(classe == "color-inverse"){
     $('.color-inverse').addClass('color-1');
     $('.color-inverse').removeClass('color-inverse');
     $('.color-inverse').removeClass('colors');
     $("#color").attr("href", "assets/css/color/inverse.css");
    }
    if(classe == "color-1"){
     $('.color-1').addClass('color-inverse');
     $('.color-1').removeClass('color-1');
     $('.color-1').addClass('colors');
     $("#color").attr("href", "assets/css/color/color-1.css");
   }
    return false;
});

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.