jQuery.on() -Funktion mit Respond.js

Question

Ich arbeite mit https://github.com/alexanderholman/Respond zu versuchen und .addClass verwenden, um eine Klasse zu einem Div hinzuzufügen, wenn das Browserfenster die Größe ändert und Bootstrap Haltepunkte ändern.

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

Die grundlegende Verwendung von Github ist dies:

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}); 
     } 
    ); 

Was ich versuche das ist, aber ich habe keine Änderungen in der div und keine errrors in der Konsole. Was mache ich falsch?

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

Ihr Problem ist, wie ein Element von Klassennamen in jQuery auszuwählen.

Wechsel von:

jQuery("div") 

An:

jQuery(".div") 

Für weitere Informationen können Sie einen Blick darauf werfen können Selecting by Class

Das Snippet ist (die aktualisierte 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>