javascript - jquery遍历父div改变背景颜色

Question

我是 jquery 的新手。我有一个类似下面的 html 代码

<div class="left-column">
     <div class="team-logo">
           <img width="72" height="68" src="../public/img/logo/52dce6461dd037.png" alt="Teamlogo">
      </div>
      <div class="team-name">
           test9<br>
           25. January  2014
      </div>
      <div class="team-check">
           <label><input type="checkbox" name="gamecheck[]" value="9"></label>
      </div>
 </div>

我需要在选中复选框时更改“左栏”的背景颜色。当它未选中时，我必须删除颜色。

我设法在下面写了一段代码，但没有得到父节点“左列”。请帮我解决这个问题。谢谢

$("input[type='checkbox']").change(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass("redBackground");
    }else{
        $(this).parent().removeClass("redBackground");
    }
});

Answer 1

定位最近的 .left-column 并使用 toggleClass 切换类:

$("input[type='checkbox']").on('change', function(){
     $(this).closest('.left-column').toggleClass('redBackground', this.checked);
});

FIDDLE