Question

用户从我的下拉菜单中点击至少1个选项后，按钮颜色会发生变化。现在，当用户取消选择所有选项（以便选择零选项）时，我希望按钮颜色自动更改回原始颜色。这有可能实现吗？我尝试使用if-else，但它没有用。附：用户可以取消选中取消选中每个选项框或使用＆＃34;清除＆＃34;清除所有的按钮。

var i = $("li").index( $(this).parent() );

  if ( i === 1 ) {
    $('btn_clear').css('background', 'blue');
  } else if ( i === 2 ) {

这是我的BOOTPLY ...... BOOTPLY

Answer 1

只需将您的2个点击处理程序更改为以下1：

$(".products .checkbox, .availability .checkbox").on("click", function(e) {

  var menu = $(this).closest('.dropdown-menu');

  var checkCount = menu.find(':checked').length;

  $('.btn_clear', menu).css('background', checkCount > 0 ? 'blue' : 'grey');
  $('.btn_apply', menu).css('background', checkCount > 0 ? 'green' : 'yellow');

});

这只会计算其下拉列表中的checked并相应地设置颜色。

Bootply

<强>附录

这里是清除处理程序的更新代码。

$(".btn_clear").on('click', function (e) {
    e.stopPropagation();
    var menu = $(this).closest('.dropdown-menu');
    menu.find('input[type="checkbox"]').prop('checked', false);
    $('.btn_apply', menu).css('background', 'yellow');
});

Answer 2

只需为颜色设置默认值，然后按照这样的方式进行分配：

var i = $('li').index($(this).parent()),
    // here is the "original" color of the button.
    color = 'red';

if (i === 1) {
    color = 'blue';
} else if (i === 2) {
    color = 'green';
} // etc

// Save yourself a bunch of repeated code, and only have the assignment once.
$('#btn_clear').css('background', color);

Answer 3

我考虑使用jQuery＆＃39; .addClass()和.removeClass()然后定义该类应具有的颜色。在处理应用程序逻辑与样式化时，这允许一些关注点分离

式

.blue-text {
  color: blue;
}

的jQuery

var i = $("li").index( $(this).parent() );

if ( i === 1 ) {
  $('btn_clear').addClass('blue-text');
} else if ( i === 2 ) {
  $('btn_clear').removeClass('blue-text');
}

当下拉菜单为空时，将btn颜色更改回原始颜色

3 个答案:

式

的jQuery