带有Respond.js的jQuery .on（）函数

Question

我正在使用https://github.com/alexanderholman/Respond尝试使用.addClass在浏览器窗口调整大小并且Bootstrap断点发生变化时向div添加一个类。

小提琴：https://jsfiddle.net/esujd377/14/

github的基本用法是：

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

我正在尝试的是这个，但我没有对div进行任何更改，也没有在控制台中出现错误。我做错了什么？

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

您的问题是如何在jQuery中按类名选择元素。

更改自：

jQuery("div")

要：

jQuery(".div")

有关详细信息，请查看Selecting by Class

该片段是（更新后的jsfiddle）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;