Question

我无法弄清楚为什么这不起作用：

$(document).ready(function() {
    if ($('.checkarea.unchecked').length) {
       $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('checked').addClass('unchecked');
}
else {
    $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('unchecked').addClass('checked');
}
});

以下是HTML结构的屏幕截图：http://cloud.lukeabell.com/JV9N（更新了正确的屏幕截图）

此外，必须有更好的方法来查找项目的父项（页面上有多个这些元素，所以我需要它才能实现未选中的项目）

以下是一些可能很重要的其他代码：

$('.toggle-open-area').click(function() {
        if($(this).parent().parent().parent().parent().parent().parent().parent().hasClass('open')) {
              $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('open').addClass('closed');
          }
          else {
              $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('closed').addClass('open');
          }
    });


    $('.checkarea').click(function() {
        if($(this).hasClass('unchecked')) {
              $(this).removeClass('unchecked').addClass('checked');
              $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('open').addClass('closed');
          }
          else {
              $(this).removeClass('checked').addClass('unchecked');
              $(this).parent().parent().parent().parent().parent().parent().parent().removeClass('closed').addClass('open');
          }
    });

（对该部分的改进非常开放）

非常感谢你！

以下是这一切发生的链接：http://linkedin.guidemytech.com/sign-up-for-linkedin-step-2-set-up-linkedin-student/

更新

我已经改进了评论中的代码，但仍然遇到第一部分无效的问题。

$(document).ready(function() {
if ($('.checkarea.unchecked').length) {
    $(this).parents('.whole-step').removeClass('checked').addClass('unchecked');
}
else {
    $(this).parents('.whole-step').removeClass('unchecked').addClass('checked');
}
});

-

  $('.toggle-open-area').click(function() {
        if($(this).parents('.whole-step').hasClass('open')) {
              $(this).parents('.whole-step').removeClass('open').addClass('closed');
          }
          else {
              $(this).parents('.whole-step').removeClass('closed').addClass('open');
          }
    });


    $('.toggle-open-area').click(function() {
        $(this).toggleClass('unchecked checked');
        $(this).closest(selector).toggleClass('open closed');
    });


    $('.checkarea').click(function() {
        if($(this).hasClass('unchecked')) {
              $(this).removeClass('unchecked').addClass('checked');
              $(this).parents('.whole-step').removeClass('open').addClass('closed');
          }
          else {
              $(this).removeClass('checked').addClass('unchecked');
              $(this).parents('.whole-step').removeClass('closed').addClass('open');
          }
    });

Answer 1

哇，您可以使用closest或parents()方法。

closest( selector )获取与选择器匹配的第一个元素，从当前元素开始，逐步向上遍历DOM树。

parents( [selector] )获取当前匹配元素集中每个元素的祖先，可选择通过选择器进行过滤。

Answer 2

我建议：

$('.toggle-open-area').click(function() {
    $(this).toggleClass('unchecked checked');
    $(this).closest(appropriateSelector).toggleClass('open closed');
});

顺便说一句，我无法提供实际选择器来代替appropriateSelector，因为您发布的图片¹不会（似乎）包含该特定内容元件。

参考文献：

closest()。
toggleClass()。

1。您意识到可以在问题中包含实际加价？这种方式更加方便，并且更容易使用（创建演示，纠正错别字，在外部网站崩溃，死亡或重组其内容的情况下保留有用性......）。

“找到父母”和if语句的更好方法

更新

2 个答案: