CODEWITHSUNDEEP
javascriptjquerycssmaterialize
Mathew
Mathew

Reputation: 3

Increment or decrement class name with jQuery

I'm using the Materialize CSS (http://materializecss.com/) framework which has (admittedly, a bloated stylesheet full of) class names for colours; class names follow the logic:

.blue {}
.blue.darken-1 {}
.blue.lighten-1 {}

"Darken" and "lighten" increment from 1-5. I am trying to write a function that increments the class on hover; because some elements will have a colour name class (blue) and others will have a colour name and a "darken" or "lighten" modifier class (ie. blue lighten-3), I have taken the approach of using indexOf to search through an element's classes. I can't help but feel, though, that this approach is inefficient and clunky. Any ideas?

function darkenClass(theclasses, theelem) {
    var gotclass = theclasses;
    var gotelem = theelem;
    if (gotclass.indexOf('darken-1') > -1) {
        gotelem.attr("class", "").attr("class", gotclass.replace("darken- 1", "darken-2"));
    } else if (gotclass.indexOf('darken-2') > -1) {
        gotelem.attr("class", "").attr("class", gotclass.replace("darken-2", "darken-3"));
    } else if (gotclass.indexOf('darken-3') > -1) {
        gotelem.attr("class", "").attr("class", gotclass.replace("darken-3", "darken-4"));
    } else if (gotclass.indexOf('darken-4') > -1) {
        gotelem.attr("class", "").attr("class", gotclass.replace("darken-4", "darken-5"));
    } else if (gotclass.indexOf('lighten-5') > -1) {
        gotelem.attr("class", "").attr("class", gotclass.replace("lighten-5", "lighten-4"));
    } else if (gotclass.indexOf('lighten-4') > -1) {
        gotelem.attr("class", "").attr("class", gotclass.replace("lighten-4", "lighten-3"));
    } else if (gotclass.indexOf('lighten-3') > -1) {
        gotelem.attr("class", "").attr("class", gotclass.replace("lighten-3", "lighten-2"));
    } else if (gotclass.indexOf('lighten-2') > -1) {
        gotelem.attr("class", "").attr("class", gotclass.replace("lighten-2", "lighten-1"));
    } else {
        gotelem.addClass("darken-1");
    }
}

Upvotes: 0

Views: 778

Answers (2)

collapsar
collapsar

Reputation: 17238

One approach uses data attributes on the html elements:

html:

<div class="darken-3" data-darken="3"><!-- ... --></div>
<div class="lighten-2" data-lighten="2"><!-- ... --></div>
<!--  etc -->

js:

function darkenClass(theclasses, theelem) {
    var n_dark
      , n_light
      ;

    n_dark  = parseInt($(theelem).attr('data-darken')) || 0;
    n_light = parseInt($(theelem).attr('data-lighten')) || 0;
    if ((n_dark > 0) && (n_dark < 5)) {
       $(theelem).removeClass('darken-' + n_dark );
       n_dark++;
       $(theelem).attr('data-darken', n_dark);
       $(theelem).addClass('darken-' + n_dark);
    }
    else {
       if ((n_light < 6) && (n_light > 1)) {
          $(theelem).removeClass('lighten-' + n_light );
          n_light--;
          $(theelem).attr('data-lighten', n_light );
          $(theelem).addClass('lighten-' + n_light );
       }
       else {
          $(theelem).addClass('darken-1' );
       }
    }
}

Upvotes: 0

azium
azium

Reputation: 20614

$('element').mouseover(function () {
  var classList = $(this).attr('class').split(' ');

  classList.forEach(function (clss) {
    if (clss.indexOf('darken') > -1) {
      var color = clss.split('-')[0];
      var desiredNumber = clss.split('-')[1] + 1;
      $(this).removeClass(clss).addClass(color + '-' + desiredNumber);
    }

    else if (clss.indexOf('lighten') > -1) {
      var color = clss.split('-')[0];
      var desiredNumber = clss.split('-')[1] - 1;
      $(this).removeClass(clss).addClass(color + '-' + desiredNumber);
    }
  });
})

Upvotes: 1

Related Questions