Change the class name with jQuery

Question

Change the class name with jQuery

Navigation

#1 by (1 votes)

1

I want to create jQuery with contrast functionality, where the user clicks on a particular button, the site would be dark and if clicked again, it would return to normal. We bought a template that offers this functionality, but in the following way:

Hiscodelookslikethis:

(function(){$('<divclass="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 this, I tried it that way, but it did not 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

asked by anonymous 19.11.2017 / 13:20

1 answer

Use AJAX return in other functions Pass variable value through a button

score 1 · Answer 1

I managed to resolve. Here is 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;
});