Question

我已经制作了一张信息卡，在信息卡div中的右上角有一个复选框。目标是在选中复选框时，信息卡div的背景颜色随淡入淡出而变化。似乎无法让它发挥作用。任何帮助，将不胜感激。代码https://jsfiddle.net/wptq9sfk/：

HTML：

<div class="pin" id="pin"> 
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" id="like" ><label></label> 
</div>    
<p class="pull-left">13.01.16  </p> <!-- date -->     
<h2>Title </h2> <!-- title-->   
<p> </p>
<div class="text-center">    
<p class="card-title"><a href="" class="">Like</p></a>        
</div>
</div>

<script>
$(document).ready(function () {
$("#like").click(function () {
$("#pin").toggleClass("pincard-checked");
});    
});
</script>

CSS

.pincard-checked{background-color: #000000; color: #ffffff;}

Answer 1

你缺少document.ready函数，你也错过了你发布的JSfiddle中你自己的pin-checked css。我已更新您的代码并在codePen中运行。请在下面找到链接。代码工作正常。

http://codepen.io/johnsonshara/pen/obGjGN

$(document).ready(function(){
  $("#like").click(function () {
    $("#pin").toggleClass("pincard-checked");
  });
});

Answer 2

<p class="card-title"><a href="" class="">Like</p></a>

你没有更改p和结束标签吗？

修改

另外，我认为最好使用＆＃34; onchange＆＃34;功能在复选框上，而不是＆＃34; onclick＆＃34;

类似的东西：

<input type="checkbox" onchange="togglingCheckbox(this)" .....>

通过这种方式，您可以检测是否使用键盘更改了复选框状态，而不仅仅是鼠标。

Answer 3

我认为你应该把你的javascript放在

中

$(document).ready(function () {

});

因为Jquery需要它

onclick复选框返回父div的底色变化

3 个答案: