Question

我有十个.progress实例。所有这些都有基于百分比的宽度。

如果.progress的任何给定实例的宽度超过100％，我想将它的样式设置为背景红色，然后强制为100％宽度。

任何帮助？

这是我的微弱尝试。

if ($( '.progress' ).css("width") > '100%') {
     $(this).css('background-color', 'red');
     // or $(this).addClass('red');

}

Answer 1

我认为%中的宽度在js中不可用，所以我认为您应该尝试将目标的宽度检查到其父级的宽度：

if ($('.progress').css("width") >== $('.progress').parent().css("width")) {
   $(this).css('background-color', 'red');
   // or $(this).addClass('red');
}

或者这样：

$('.progress').each(function(){
   var $target = $(this);
   if ($target.css("width") >== $target.parent().css("width")) {
      $target.css('background-color', 'red');
      // or $target.addClass('red');
   }
});

或者这样

$('.progress').css('background-color', function(_, color) {
    return $(this).width() > $(this).parent().width() ? 'red' : color;
});

Answer 2

$( '.progress' ).each(function() {
var $this = $(this);

if ($this.css("width") > '100%') {
     $this.css({
        'background-color':  'red',
        'width' : '100%'
     });
}
});

或

$( '.progress' ).each(function() {
var $this = $(this);

if (( 100 * parseFloat($this.css('width')) / parseFloat($this.parent().css('width')) ) > '100%') {
     $this.css({
        'background-color':  'red',
        'width' : '100%'
     });
}
});

使用jQuery检查div的百分比宽度并执行条件样式

2 个答案: