4

我不知道为什么这不起作用:

$(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');
          }
    }); 
4

2 回答 2

6

,你可以使用closestparents()方法。

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

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

于 2012-09-15T21:17:43.577 回答
1

我建议:

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

顺便说一句,我无法提供一个实际的选择器来代替,appropriateSelector因为您发布的图片1没有(似乎)包含该特定元素。

参考:


1.你意识到你可以在问题中包含实际的标记吗?这种方式更方便,并且更容易使用(创建演示,纠正错别字,在外部站点崩溃、死亡或重新组织其内容的情况下保持有用性......)。

于 2012-09-15T21:21:51.160 回答