javascript - 为什么使用 Javascript if 语句替换类名不起作用？

Question

$(document).ready(checkWidth);
$(window).resize(checkWidth);
function checkWidth() {
var $window = $(window);
$("pre").text($window.width());
if ($window.width() < 321) {
       $('.grve-tablet-column-1-4')
       .removeClass('grve-tablet-column-1-2').addClass('grve-tablet-column-1');      
 }
else {
       $('.grve-tablet-column-1')
       .removeClass('grve-tablet-column-1').addClass('grve-tablet-column-1-2');                
    }
}

<footer id="grve-footer">

				<div class="grve-container">
						<div id="grve-footer-area" class="grve-section" data-section-type="fullwidth-background" style="visibility: visible; margin-left: 158px; margin-right: 158px;">
			<div class="grve-row">
<div class="grve-column-1-4 grve-tablet-column-1-2"><div id="text-3" class="grve-widget widget widget_text">			<div class="textwidget"><ul class="footerlist">
<li class="maintitle"><a href="http://www.sine.co/">Home</a></li>
<li class="title"><a href="http://www.sine.co/features/">Features</a></li>
<li><a href="http://www.sine.co/venue-setup/">Venue Setup</a></li>
<li><a href="http://www.sine.co/visitors-app/">Visitor's App</a></li>
<li class="title"><a href="http://www.sine.co/pricing/">Pricing</a></li>
<li><a href="http://www.sine.co/venue-plan-request/">Venue Plan Request</a></li>
<li><a href="http://www.sine.co/venue-hardware/ ">Venue Hardware</a></li>
</ul></div>
		</div></div><div class="grve-column-1-4 grve-tablet-column-1-2"><div id="text-2" class="grve-widget widget widget_text">			<div class="textwidget"><ul class="footerlist">
<li class="maintitle"><a href="http://www.sine.co/support/">Support</a></li>
<li><a href="https://sine.freshdesk.com/support/home"> FAQ</a></li>
<li class="secondtitle"><a href="https://admin.sine.co/">Try Sine for Free<br>Enterprise Login</a></li>
<li><a href="http://www.sine.co/privacy/">Privacy Policy</a></li>
<li><a href="http://www.sine.co/terms-of-use/">Terms of Use</a></li>
</ul></div>
		</div></div><div class="grve-column-1-4 grve-tablet-column-1-2"><div id="text-4" class="grve-widget widget widget_text">			<div class="textwidget"><ul class="footerlist">
<li class="maintitle">Free Download</li>
<li><a href="https://itunes.apple.com/gb/app/sine/id784906271?mt=8"><img src="http://www.sine.co/wp-content/uploads/2014/11/appstorebutton.png"></a></li>
<li><a href="https://play.google.com/store/apps/details?id=co.sine.sinepass&amp;hl=en"><img src="http://www.sine.co/wp-content/uploads/2014/11/googleplaybutton.png"></a></li>

</ul></div>
		</div></div><div class="grve-column-1-4 grve-tablet-column-1-2"><div id="text-5" class="grve-widget widget widget_text">			<div class="textwidget"><ul class="footerlist">
<li class="mail"><a href="mailto:info@sine.co">info@sine.co</a></li>
<li class="skype"><a href="skype:sinehelp?call">sinehelp</a></li>
<li class="phone"><a href="tel:+61881215956">+61 8 8121 5956</a></li>
<li class="twitter"><a href="http://www.twitter.com/SineHQ">SineHQ</a></li>
<li class="linkedin"><a href="http://www.linkedin.com/company/sinepass">SineHQ</a></li>
</ul></div>
		</div></div>			</div>
		</div>
				

							<div id="grve-footer-bar" class="grve-section" data-section-type="fullwidth-element" data-align-center="yes" style="visibility: visible; padding-left: 0px; padding-right: 0px; margin-left: 158px; margin-right: 158px;">

				<div class="grve-row">
					<div class="grve-column-1-2">
						<div class="grve-copyright">
							<p style="text-align: center;">Copyright 2015 Sine Group Pty Ltd. Patents Pending.</p>							<a href="http://www.bugejastudio.com" class="bugeja">Website by Bugeja Studio</a>
						</div>
					</div>
					
				</div>
			</div>


				</div>

			</footer>

我想知道我将如何替换类名，使用 JavaScript 为我的页脚中的 4 个 div 命名:class="grve-column-1-4 grve-tablet-column-1-2"。

我试过使用这段代码但没有成功:

$(document).ready(function() {
    var $window = $(window);

    // Function to handle changes to style classes based on window width
    function checkWidth() {
        if ($window.width() < 321) {
            $('.grve-tablet-column-1-2').removeClass('grve-tablet-column-1-2').addClass('grve-tablet-column-1');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);
});

当您在移动设备上访问该网站时，页脚如下所示:

为了解决这个问题，我可以将这 4 个 div 的类更改为 grve-tablet-column-1，因此它将组织在一个列下，如下所示:

Answer 1

试试这个:

// Execute on load
$(document).ready(checkWidth);
// Bind event listener
$(window).resize(checkWidth);
// Function to handle changes to style classes based on window width
function checkWidth() {
var $window = $(window);
$("pre").text($window.width());
if ($window.width() < 321) {
       $('.grve-tablet-column-1-2')
       .removeClass('grve-tablet-column-1-2').addClass('grve-tablet-column-1');      
 }
else {
       $('.grve-tablet-column-1')
       .removeClass('grve-tablet-column-1').addClass('grve-tablet-column-1-2');                
    }
}

在这里摆弄:http://jsfiddle.net/u4cn338g/1/