Question

我正在开发一个页面，其中大约有6个div具有相同类别的“bar”，但每个div的宽度根据用户的输入动态变化。我现在需要做的是改变任何宽度为250px且类别为“bar”的div的颜色。我的概念如下：

if($('.bar').width() == 250) {
    $(this).addClass('barColor');
}
else {
    $(this).removeClass('barColor');
}

这基本上是我的概念，但我不知道如何实现这个效果。如果有人能提供帮助，将不胜感激

谢谢。

Answer 1

$('.bar').each(function(){
    if($(this).width() == 250) 
        $(this).addClass('barColor');
    else
        $(this).removeClass('barColor');
}).

Answer 2

如果您只有一个.bar元素，那么您提出的解决方案听起来应该有效，但您有多个。如果你想在给定的时间间隔内继续运行它，我看到的另一件事是可能的，因此每当动态更改这些框时，你都会应用效果。

$(window).resize(function() {
  clearTimeout(this.id);
  this.id = setTimeout(adjustClass, 500);
});

function adjustClass() {
  $('.bar').each(function() {
    if $(this).width() == 250) {
      $(this).addClass('barColor');
    }
    else {
      $(this).removeClass('barColor');
    }
  });
}

编辑：每次调整窗口大小时，当用户调整大小时，每500毫秒调用一次效果，以避免为每个窗口调整大小的差异进行函数调用。

如何使用jQuery获取具有一定宽度的元素？

2 个答案: