代码之家 › 专栏 › 技术社区 › clestcruz

尝试根据元素的宽度添加和删除类

jquery javascript

clestcruz · 技术社区 · 7 年前

我有一个脚本,我目前的工作,听元素的宽度,并添加和删除一个元素 class 在特定断点上。当我尝试使用 $(window).on('resize', function() 要在调整浏览器大小时执行脚本,它似乎不起作用。

检查 console

<div class="tab-content">
    <div class="content-area"></div>

    <div class="card-collection -grid">
        <div class="articles-view">
            <div class="article-card">
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {
    var $contentAreaWrapper = $('.tab-content .content-area');

    if ($contentAreaWrapper.width() <= 660) {
        $('.card-collection').removeClass('-grid');
        $('.articles-view').addClass('-list-grid-aligned');
    }

    else if ($contentAreaWrapper.width() >= 660) {
        $('.card-collection').addClass('-grid');
        $('.articles-view').removeClass('-list-grid-aligned');
    }
})

$(window).on('resize', function() {
    var $contentAreaWrapper = $('.tab-content .content-area');

    if ($contentAreaWrapper.width() <= 660) {
        $('.card-collection').removeClass('-grid');
        $('.articles-view').addClass('-list-grid-aligned');
    }

    else if ($contentAreaWrapper.width() >= 660) {
        $('.card-collection').addClass('-grid');
        $('.articles-view').removeClass('-list-grid-aligned');
    }
});

2 回复 | 直到 7 年前

t3__rry 7 年前

结合 offsetWidth https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth 以及 resize 事件应该起作用。

你听我说 调整大小

$(window).on('resize', () => {
  if ($(body).offsetWidth < 900) {
   $(body).addClass('lt-900');
    console.log('resized');
  }
})

Aquib Iqbal 7 年前

你的代码正常工作。在整个页面视图中检查代码段

$(document).ready(function() {
			var $contentAreaWrapper = $('.tab-content .content-area');

			if ($contentAreaWrapper.width() <= 660) {
				$('.card-collection').removeClass('-grid');
				$('.articles-view').addClass('-list-grid-aligned');
			}

			else if ($contentAreaWrapper.width() >= 660) {
				$('.card-collection').addClass('-grid');
				$('.articles-view').removeClass('-list-grid-aligned');
			}
		})

		$(window).on('resize', function() {
			var $contentAreaWrapper = $('.tab-content .content-area');

			if ($contentAreaWrapper.width() <= 660) {
				$('.card-collection').removeClass('-grid');
				$('.articles-view').addClass('-list-grid-aligned');
			}

			else if ($contentAreaWrapper.width() >= 660) {
				$('.card-collection').addClass('-grid');
				$('.articles-view').removeClass('-list-grid-aligned');
			}
		});

.-grid {
			color: red;
		}
		.-list-grid-aligned {
			color: blue;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content">
		<div class="content-area"></div>

		<div class="card-collection -grid">
			<div class="articles-view">
				<h1>Articles View</h1>
				<div class="article-card">
					<h2>Article Card</h1>
				</div>
			</div>
		</div>
	</div>