Javascript 对于if和else输出，在if/else语句完成后，jQuery each（）函数不工作

我使用jQuery和javascript根据视口宽度是否小于或大于图像宽度的两倍来切换图像的类。 我使用$（window）.resize来检测寡妇何时被调整大小，然后使用each（）函数来迭代某个类的所有图像。 if语句检查视口的宽度是否小于图像宽度的两倍，如果是，则删除一个类并添加另一个类。else语句的作用正好相反

一个页面加载它可以很好地处理和我一样多的窗口宽度更改，直到if和else都被执行，然后它们停止工作。如有任何建议，将不胜感激

谢谢

这是我的密码：

    function updateViewportDimensions() {
      var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName("body")[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight || e.clientHeight || g.clientHeight;
      return { width: x, height: y };
    };

    jQuery(window).resize(function() {

        var viewport = updateViewportDimensions();

        var viewport_width = viewport['width'];    

        console.log('Viewport width = ' + viewport_width);

        jQuery(document).ready(function($) {      

          $('.alignright').each(function(i, obj){

            // get the width of each image
            var image_width = $(this).width();

            // if the viewport width is less than twice the image width then switch the classes
            if(viewport_width < (image_width * 2)) {
              $(this).removeClass('alignright');
              $(this).addClass('aligncenter');
              console.log('Viewport is less than twice image width');
            } else {
              console.log('Viewport is more than twice image width');
              $(this).addClass('alignright');
              $(this).removeClass('aligncenter');
            };
          });
        });
      });

函数updateViewportDimensions（）{
var w=窗口，
d=文件，
e=d.documentElement，
g=d.getElementsByTagName（“主体”）[0]，
x=w.innerWidth | | e.clientWidth | | g.clientWidth，
y=w.内部高度| | e.倾斜度| | g.倾斜度；
返回{宽度：x，高度：y}；
};
jQuery（窗口）.resize（函数（）{
var viewport=updateViewportDimensions（）；
var viewport_width=视口['width']；
log（'Viewport width='+Viewport_width）；
jQuery（文档）.ready（函数（$）{
$（'.alignright'）。每个（函数（i，obj）{
//获取每个图像的宽度
var image_width=$（this）.width（）；
//如果视口宽度小于图像宽度的两倍，则切换类
如果（视口宽度<（图像宽度*2））{
$（this.removeClass（'alignright'）；
$（this.addClass（'aligncenter'）；
log（“视口小于图像宽度的两倍”）；
}否则{
log（“视口的宽度超过图像宽度的两倍”）；
$（this.addClass（'alignright'）；
$（this.removeClass（'aligncenter'）；
};
});
});
});

如果我读得正确，

（this.removeClass（'alignright'）正在更改您的dom。因此，类
alignright
的所有链接现在都是新的，但是jquery仍在查找已删除的实例

更新
$（'.alignright'）。每个（函数（i，obj）{
比正在更改的高一级

如果代码是

<div id="outer-wrapper">
    <div class="alignright">
        content
    </div>
</div>


内容

使用
$（'#outer wrapper.alignright'）。每个（函数（i，obj）{
您能详细说明一下“停止工作”吗有错误吗？
console.log
语句出现了吗？我的意思是…你的。每个都只运行在具有类A的元素上。如果你删除类A，则不再有任何具有类A的元素，因此它不会迭代任何元素。这里的逻辑似乎有缺陷。凯文B-你完全正确-我是tota我白痴…对不起！那不是还有同样的问题吗？如果它像你提到的那样删除所有元素，是的。但是我假设一些元素是
aligncenter
，所以它们是
alignright
对的，但是，这仍然会导致没有alignright的元素永远无法选择…因此永远无法重新获得alignright。我这与问题中的代码在功能上没有什么不同。是的，看起来它们之间存在一些逻辑问题，无法再次正确对齐。一旦解决了这个问题，它看起来仍然会有我提到的问题。这是如果它们希望窗口变大或缩小，而不仅仅是一个或另一个。谢谢这是给大家的意见，现在感觉自己像个十足的白痴……在我把我的头拧回去之后，我要回到这个开始！