jQuery .on() function with Respond.js

Question

I'm working with https://github.com/alexanderholman/Respond to try and use .addClass to add a class to a div when the browser window resizes and Bootstrap breakpoints change.

Fiddle: https://jsfiddle.net/esujd377/14/

The basic usage from github is this:

var onFunctions = {
        on: {
            is: {
                xs: function(){console.log('is xs')},
                sm: function(){console.log('is sm')},
                md: function(){console.log('is md')},
                lg: function(){console.log('is lg')}
            },
            was: {
                xs: function(){console.log('was xs')},
                sm: function(){console.log('was sm')},
                md: function(){console.log('was md')},
                lg: function(){console.log('was lg')}
            }
        }
    };
    $(document).ready(
        function() {
            $.respond({functions:onFunctions});
        }
    );

What I'm trying is this, but I get no changes in the div and no errrors in the console. What am I doing wrong?

var onFunctions = {
            on: {
                is: {
                    xs: function(){console.log('is xs')},
                    sm: function(){console.log('is sm')},
                    md: function(){ jQuery("div").addClass("whiteclass"); },
                    lg: function(){console.log('is lg')}
                },
                was: {
                    xs: function(){console.log('was xs')},
                    sm: function(){console.log('was sm')},
                    md: function(){ jQuery("div").addClass("whiteclass");},

                    lg: function(){console.log('was lg')}
                }
            }
        };
        $(document).ready(
                function() {
                    $.respond({functions:onFunctions});
                }
        );

HTML:

<div class ="div">div</div>

CSS:

.div {color:red;}
.whiteclass {color:#fff;}

Answer 1

Your problem is how to select an element by classname in jQuery.

Change from:

jQuery("div")

To:

jQuery(".div")

For more details you may take a look to Selecting by Class

The snippet is (the updated jsfiddle):

function toggleDivs(a, b) {
  var className = 'div' + a.toUpperCase() + b.toUpperCase();
  var allClasses = ['divISXS', 'divWASXS', 'divISSM', 'divWASSM', 'divISMD', 'divWASMD', 'divISLG', 'divWASLG'];

  delete allClasses[allClasses.indexOf(className)];
  jQuery(".adiv")
  .toggleClass(className, !$(this).hasClass(className))
  .toggleClass(allClasses.join(' '), false);
  console.log(a + ' ' + b);
}

var onFunctions = {
  on: {
    is: {
      xs: function() {
        toggleDivs('is', 'xs');
      },
      sm: function() {
        toggleDivs('is', 'sm');
      },
      md: function() {
        toggleDivs('is', 'md');
      },
      lg: function() {
        toggleDivs('is', 'lg');
      }
    },
    was: {
      xs: function() {
        toggleDivs('was', 'xs');
      },
      sm: function() {
        toggleDivs('was', 'sm');
      },
      md: function() {
        toggleDivs('was', 'md');
      },
      lg: function() {
        toggleDivs('was', 'lg');
      }
    }
  }
};
$(document).ready(
  function() {
    $.respond({
      functions: onFunctions
    });
  }
);

.divISXS {
  color:red;
}
.divWASXS {
  color:darkred;
}
.divISSM {
  color:blue;
}
.divWASSM {
  color:blueviolet;
}
.divISMD {
  color:yellow;
}
.divWASMD {
  color:yellowgreen;
}
.divISLG {
  color:transparent;
}
.divWASLG {
  color:inherit;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://rawgit.com/alexanderholman/Respond/master/src/respond.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-1"><div class="adiv">a lonely little div that needs to turn white</div></div>
        <div class="col-md-1"></div>
    </div>
</div>