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>

选中复选框后，我需要更改“左列”的背景颜色。当它不受控制时，我必须删除颜色。

我设法编写了下面的代码，但是没有得到父节点“left-column”。请帮我解决这个问题。感谢

$("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

Answer 2

.parent()只会返回元素immediate parent。在您当前的上下文中，您必须使用.closest()来实现您的需求。

尝试，

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

Answer 3

您应该使用 parents（）方法而不是 parent（）方法。

以下代码可以帮助您...

$(document).ready(function(){
    $("input[type='checkbox']").change(function(){
            if($(this).is(":checked")){

            $(this).parents('.left-column').addClass("redBackground");
            }else{
            $(this).parents('.left-column').removeClass("redBackground");
            }
            });
});

您可以从以下链接中找到完整的工作样本

的 JSFIDDLE 的

jquery遍历父div改变背景颜色

3 个答案: