Question

我正在探索一种更改div的背景颜色的方法，或者在选中复选框时更改其类。我无法理解，因为我无法理解最好的方法是什么。我复制了我在这里所做的事：https://jsfiddle.net/c8qremy2/

<input type="checkbox" name="blue" value=".cp" id="cp"><label for="blue">Couch Potato</label>

因此，通过选中上面的复选框，可以更改以下div的背景颜色：

  <div class="item cp sp cf bb" id="launDroid">
    <a href="" class="bgRed">
      <div class="content">
      <h2>Laundroid</h2>
      <p>Laundry That Does Itself</p>
      <div class="tileFooter">Category</div>
      </div>
    </a>
  </div>

背景颜色属于to bgRed类。我想知道上面的复选框是否被选中它可以改变bgRed类来说bgBlack这将是一个黑色背景吗？

Answer 1

是的，jQuery可以删除一个类并将其替换为另一个类：

$('a').removeClass('bgRed').addClass('bgBlack');

Answer 2

您可以监视change事件并根据需要更新DOM的其余部分。此外，标签上的for属性应该是您希望其应用的id的{{1}}，而不是input属性。

＆＃13;

name

＆＃13;

$('#cp').on('change',function() {
  if ($(this).is(':checked')) {
  	$('.bgRed').addClass('bgBlack');
  } else {
  	$('.bgRed').removeClass('bgBlack');
  }
})

＆＃13;

.item {
  width: 300px;
  height: 300px;
  margin: 0px;
  float: left;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.item a{
  height: 100%;
  width: 100%;
  position: absolute;
}

.item:hover a.bgRed{
	background-color: rgba(232,43, 71, 0.9);	
}

.item:hover a.bgBlack {
  background: black;
}

＆＃13;

Answer 3

您需要做的是设置更改切换时间的监视，然后检查属性是否已选中。你可以用jQuery做到这一点。我在这里更新了jsfiddle：https://jsfiddle.net/c8qremy2/2/

另请参阅此问题，了解如何检查是否使用jQuery选中了复选框：How to check whether a checkbox is checked in jQuery?

jQuery（这使得复选框将bg从黑色切换为白色）：

$('#cp').click(function() {
  if($('#cehcekc').prop('checked')) {
    $('.bgRed').css('background-color','#000');
  } else {
    $('.bgRed').css('background-color','#fff');
  }
});

使用JQuery更改悬停类

3 个答案: