JQuery css() 选择器从 class 设置背景颜色

Question

抱歉...我知道有数百个这样的问题...但我还没有找到一个可以回答我正在尝试做的问题。

CSS

.inputtable {
  background-color: #ffff66; // yellow
}
.inputtable[ disabled ] {
  background-color: #ddd; // greyed-out
}

JQuery

ajaxGetAddresses.done(function( data, textStatus ) {
    console.log( 'data length: ' + data.length );

    // clear the select
    var s2 = $( '#add_select' );
    s2.empty();
    if( data.length > 1 ){
        // ... select will be "live" 
        s2.prop( 'disabled', false );
        //s2.css( 'background-color', '#ffff66' );
        s2.css( 'background-color', '.inputtable background-color' );
    } else {
        s2.prop( 'disabled', true );
        // s2.css( 'background-color', '#ddd' );
        s2.css( 'background-color', '.inputtable[disabled] background-color' );
    }

我希望这是有道理的：如果 data 中有 0 个或 1 个元素（数组），那么我希望禁用 SELECT。并且背景是灰色的。否则我希望它有一个黄色的背景，表明它可以使用。

用于设置 background-color 的 css 命令的 "hard-coded" 版本工作正常...我只是无法弄清楚我如何 "retrieve" background-color 来自此 class 的值（正常和禁用）。

额外的细节

HTML 看起来像这样：

  <div id="div1" >
    <div id="select_div" ><u>S</u>elect: 
    <select id="secondname_dropdown" size="1" class="inputtable"  ></select>
    </div>
  </div>

...

  <div id="address_number">
    Address <select id='add_select' class='inputtable' ></select> 
    of <span id='number_of_addresses' ></span>
  </div>

Answer 1

如果我的理解正确，您明确需要给定 class 背景颜色的十六进制值。为此，您可以使用 .css() 函数访问 CSS 的属性，如下所示：

$('.inputtable[disabled] background-color').css('background-color');

这将 return 颜色以 RGB 格式呈现给您。 answer here 描述了如何将 RBG 转换为十六进制值。

Answer 2

试试这个可能对你有帮助。

ajaxGetAddresses.done(function( data, textStatus ) {
    console.log( 'data length: ' + data.length );
    // clear the select
    var s2 = $( '#add_select' );
    s2.empty();
    if( data.length > 1 ){
        // ... select will be "live" 
        s2.prop( 'disabled', false );
        //s2.css( 'background-color', '#ffff66' );
        s2.addClass( 'inputtable' );
    } else {
        s2.prop( 'disabled', true );
        // s2.css( 'background-color', '#ddd' );
        s2.addClass( 'inputtable').attr("disabled", 'disabled');
    }

Answer 3

.inputtable {
  background-color: #ffff66; // yellow
}

.inputtable-disabled {
  background-color: #ddd; // greyed-out
}

ajaxGetAddresses.done(function( data, textStatus ) {
  console.log('data length: ' + data.length)

  // clear the select
  var s2 = $('#add_select')
  s2.empty()
  if (data.length > 1) {
    // ... select will be "live" 
    s2.prop('disabled', false)
    //s2.css( 'background-color', '#ffff66' );
    s2.removeClass('inputtable-disabled').addClass('inputtable')
} else {
    s2.prop( 'disabled', true );
    // s2.css( 'background-color', '#ddd' );
    s2.removeClass('inputtable').addClass('inputtable-disabled')
}

Answer 4

您只需要控制禁用逻辑，然后CSS将应用颜色本身。

检查这个例子：

/* if (data.length > 1) {
  // ... select will be "live" 
  s2.prop('disabled', false);
} else {
  s2.prop('disabled', true);
} */


$('#tog').on('click', function() {
  if ($('.inputtable').prop('disabled') == true) {
    $('.inputtable').prop('disabled', false);
  } else {
    $('.inputtable').prop('disabled', true);
  }
});

.inputtable {
  background-color: #ffff66; // yellow
}

.inputtable[ disabled] {
  background-color: #ddd; // greyed-out
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id="add_select" class="inputtable">

</select>
<select id="add_select" class="inputtable">

</select>
<select id="add_select" class="inputtable">

</select>

<button id="tog">Toggle disabled</button>

JQuery css() 选择器从 class 设置背景颜色

JQuery css() selector to set background-color from class

css

jquery

background-color