Question

所以我创建了一个进度条，但我遇到了一个小问题。我试图实施的规则：

每次li.page检查li.question = li.question.done是否为真.addClass .done

所以在下面的HTML中，＃p1应该已经完成了课程，＃p2和＃p3应该没有。

如果一个.done已完成所有问题，那么当前的JS会向页面中的所有.page个人添加课程.page。

希望有人能帮助我开展工作，感谢所有人的帮助！

这是html：

<ul class="pages">
    <li id="p1" class="page">
        <ul class="questions">
            <li id="q2" class="question done">1</li>
            <li id="q3" class="question done">2</li>
            <li id="q4" class="question done">3</li>
        </ul>
    </li>
    <li id="p2" class="page">
        <ul class="questions">
            <li id="q5" class="question current">4</li>
        </ul>
    </li>
    <li id="p3" class="page">
        <ul class="questions">
            <li id="q6" class="question done">5</li>
            <li id="q7" class="question">6</li>
        </ul>
    </li>           
</ul>

这个JS：

var doneCheck = function(){
    $(".page").each(function () {
        questionsInPage = $(this).closest(".questions").find("li").length;
        questionsDone = $(this).closest(".questions").find("li.done").length;

        var done = questionsDone == questionsInPage;

        $(".page").each(function() {
            if (done) {
                $(this).parent().addClass('done');
            };
        });
    });
}

Answer 1

对于每个page，我会根据类问题和已完成的元素数检查li的数量。如果他们匹配设置页面完成。

＆＃13;

var doneCheck = function() {
  $(".page").each(function() {
    if($('.question.done', this).length==$('ul li',this).length)
      $(this).addClass('done');
  });
}
doneCheck();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pages">
  <li id="p1" class="page">
    <ul class="questions">
      <li id="q2" class="question done">1</li>
      <li id="q3" class="question done">2</li>
      <li id="q4" class="question done">3</li>
    </ul>
  </li>
  <li id="p2" class="page">
    <ul class="questions">
      <li id="q5" class="question current">4</li>
    </ul>
  </li>
  <li id="p3" class="page">
    <ul class="questions">
      <li id="q6" class="question done">5</li>
      <li id="q7" class="question">6</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

不要找到所有已完成的问题，而是计算不已完成问题的数量。如果它为零，则所有问题都已完成。使用此选项设置页面的done属性。

＆＃13;

function doneCheck() {
  $(".page").each(function() {
    var allDone = $(this).find(".questions li.question:not(.done)").length == 0;
    $(this).toggleClass("done", allDone);
  });
}

$("#check").click(doneCheck);

＆＃13;

.page.done {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pages">
  <li id="p1" class="page">
    <ul class="questions">
      <li id="q2" class="question done">1</li>
      <li id="q3" class="question done">2</li>
      <li id="q4" class="question done">3</li>
    </ul>
  </li>
  <li id="p2" class="page">
    <ul class="questions">
      <li id="q5" class="question current">4</li>
    </ul>
  </li>
  <li id="p3" class="page">
    <ul class="questions">
      <li id="q6" class="question done">5</li>
      <li id="q7" class="question">6</li>
    </ul>
  </li>
</ul>
<button id="check">Check</button>

＆＃13;

仅供参考，您无法使用==来比较两个选择器的结果。如果您想测试它们是否相同，请使用.is：

if (questionsDone.is(questionsInPage)

但是你的第二个循环是错误的，因为它根据循环当前页面的.page状态在所有 done元素上设置类。

如果所有孩子都有班级

2 个答案: