0

如果选中了输入框，我正在尝试将一个类应用于 li 元素，但我无法弄清楚为什么它没有发生。HTML 和 CSS 是“由其他人设计的”，所以我确信单独的 jQuery 存在错误。

HTML是

<ol class="subproduct">
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="tested" />
    <p class="checkbox"></p>
    <h3>test <span class="price">5</h3>
    <p>word words words</p>
</li>

用于此的 Jquery 是

$(document).ready(function() {
    $('input:checkbox').change(function(){
         if($(this).is(":checked")) {
             $('.subproduct li').addClass("checked");
         } else {
             $('.subproduct li').removeClass("checked");
         }
    });
});

我用所有的 CSS 和 HTML 创建了一个小 JSFiddle - http://jsfiddle.net/sturobson/gG8Qr/

我确定有一些过度的特异性或什么？基本上，如果选中该复选框，我想向 .subproduct li 添加/删除一个类

但是当前的代码不起作用。有任何想法吗？

4

3 回答 3

1

您正在检查检查 bocx 是否被选中......然后如果选中，您正在将类添加到所有<li>.. 用于parent()获取该特定<li>和 ..使用添加或删除类 .. 使用 parent();

$(document).ready(function() {
  $('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $(this).parent().addClass("checked");
    } else {
         $(this).parent().removeClass("checked");
    }
  });
});

在这里摆弄

于 2013-03-11T10:20:27.517 回答
1

您总是将类分配给所有li元素。li尝试仅使用 jQuery parent()将其分配给直接育儿，类似于：

$(document).ready(function() {
    $('input:checkbox').change(function(){
        if($(this).is(":checked")) {
            $(this).parent("li").addClass("checked");
        } else {
            $(this).parent("li").removeClass("checked");
        }
    });
});

或者，如果您想始终将类分配给父类，无论它是li不是，您都可以使用parent()类似于以下内容：

$(document).ready(function() {
    $('input:checkbox').change(function(){
        if($(this).is(":checked")) {
            $(this).parent().addClass("checked");
        } else {
            $(this).parent().removeClass("checked");
        }
    });
});

演示- 仅将课程分配给父级li

于 2013-03-11T10:20:49.677 回答
1

您必须深入 DOM 而不是选择所有.subproduct li元素。为此，请使用 jQuery parent、next 或 prev 函数。在您的示例中：

$(document).ready(function() {
    $('input:checkbox').change(function(){
         if($(this).is(":checked")) {
             $(this).parent().addClass("checked");
         } else {
             $(this).parent().removeClass("checked");
         }
    });
});
于 2013-03-11T10:21:01.350 回答