Javascript 当满足条件时，如何使用jquery将文本追加到几个div

当所有8个div都被单击时，我希望剩余的红色div显示“完成得很好”。它似乎不起作用，我试图通过使用可怕的document.getElementsByClassName来获取类，但我想要一些更简单的方法。请帮忙

var score;

$(document).ready(function () {
    $('.b').click(function () {
        $(this).fadeOut("slow");
    });
});

function click() {
    score += 1;
    if (score === 8) {  document.getElementsByClassName(a).innerHTML += 'Well Done';
    }
}

（JSFiddle）

有几件事：

-

score

从未指定默认值，每次尝试添加1时会导致

NaN

-您从不调用

click（）

-您必须迭代div并应用

innerHTML

——我刚刚使用了jQuery，因为您已经有了它：

var score = 0;

$(document).ready(function () {
    $('.b').click(function () {
        $(this).fadeOut("slow");
        click();
    });
});

function click() {
    score += 1;
    if (score === 8) {  $(".a").text('Well Done');
    }
    console.log(score);
}

演示：

---

将上述内容放在单击处理程序中。

代码的另一种解决方案是检查类为

b

的元素是否仍然可见：

$(document).ready(function () {
    $('.b').click(function () {
        $(this).fadeOut("slow", function() {
            if($(".b:visible").length === 0) {//fading out element is still technically visible ;)
                $(".a").text("Well done");            
            }
        });
    });
});

更新代码以处理注释中提到的竞争条件

---

您永远不会执行函数

click（）

。方法

$（…）.click（）

和您的函数不一样。最简单的方法是检查所有

b

类div是否隐藏不幸的是，本地javascript不会发生隐式迭代，这是jquery实现的。因此，您必须迭代所有这些元素，并逐个更改html，除非您想使用jquery来完成（这可以很容易地在一行中完成）而不是等到所有蓝色元素都被隐藏后才说“完成得很好”（在修复错别字之后）如果在上一个完全隐藏之前单击最后一个，则会出现一个微小的竞争条件。通过将if块移动到淡出回调中并测试长度为0ya，解决了这个问题。我在编写它时也在考虑这个问题。你知道怎么处理吗？

$(document).ready(function () {
    $('.b').click(function () {
        $(this).fadeOut("slow", function() {
            if($(".b:visible").length === 0) {//fading out element is still technically visible ;)
                $(".a").text("Well done");            
            }
        });
    });
});