Question

我试图在单击复选框的标签时添加唯一的背景颜色（复选框本身是隐藏的）。我可以让它添加背景颜色，但一旦应用它就不会删除它。我有什么（https://jsfiddle.net/9oq88dro/）：

CSS

label {user-select:none}
input {position: absolute; left: -9999px;}

HTML

<div class="container">
  <input id="1" type="checkbox" value="test 1"><label for="1" data-color="red">test 1</label>
  <input id="2" type="checkbox" value="test 2"><label for="2" data-color="blue">test 2</label>
  <input id="3" type="checkbox" value="test 3"><label for="3" data-color="green">test 3</label>
</div>

的jQuery

$('.container label').on('click', function() {
  if ($(this).css('background-color', '')) {
    $(this).css('background-color', $(this).data("color"));
  } else {
    $(this).css('background-color', '');
  }
});

Answer 1

有些浏览器会在background-color和rgb()中返回rgba()，而不一定是您提供的颜色名称。如果您只想打开和关闭颜色，可以切换类以确定状态。

＆＃13;

$('.container label').on('click', function() {
  var color = $(this).data('color');
  if (!$(this).hasClass('color')) {
    $(this).css('background-color', color);
    $(this).addClass('color');
  } else {
    $(this).css('background-color', 'transparent');
    $(this).removeClass('color');
  }
});

＆＃13;

label {
  user-select: none
}

input {
  position: absolute;
  left: -9999px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input id="1" type="checkbox" value="test 1">
  <label for="1" data-color="red">test 1</label>
  <input id="2" type="checkbox" value="test 2">
  <label for="2" data-color="blue">test 2</label>
  <input id="3" type="checkbox" value="test 3">
  <label for="3" data-color="green">test 3</label>
</div>

＆＃13;

Answer 2

看起来css正在返回rgba(0, 0, 0, 0)。如果你愿意，你可以只使用dom属性。

＆＃13;

$('.container label').on('click', function() {
  if (!this.style.backgroundColor) {
    this.style.backgroundColor = $(this).data("color");
  } else {
    this.style.backgroundColor = '';
  }
});

＆＃13;

label {user-select:none}
input {position: absolute; left: -9999px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input id="1" type="checkbox" value="test 1"><label for="1" data-color="red">test 1</label>
  <input id="2" type="checkbox" value="test 2"><label for="2" data-color="blue">test 2</label>
  <input id="3" type="checkbox" value="test 3"><label for="3" data-color="green">test 3</label>
</div>

＆＃13;

如何使用jQuery和html5数据属性添加/删除背景颜色

2 个答案: