单击eventlistener时限制图标选择的Javascript代码

我有下面的HTML；我尝试编写一些JavaScript来选择多达14个图标，并将类从“文本静音”切换到“文本主”。选择14个图标后，它将被禁用，并且不再在类之间切换

如果我们在取消选择后选择14个图标，它将再次允许我选择一个以上的图标来完成14个，但不超过14个

var-icons=document.getElementsByClassName（“fa-baby”）；
对于（int i=0；i14）{
this.style.classList.add（“文本静音”）；
}否则{
this.style.classList.toggle（“主要文本”）；
}
})
}

2019年3月
2019年4月
2019年5月
2019年6月
2019年7月
2019年8月
2019年9月
Okt 2019
2019年11月
2019年12月
2020年1月
2020年2月
2020年3月
2020年4月
石膏
2019年4月

2019年5月

2019年6月

2019年7月

2019年8月

2019年11月

2019年10月

2019年11月

2019年12月

2020年1月

2020年2月

2020年3月

2020年4月

您的代码有一些问题。当触发click事件时，您试图捕获的变量正在更改。我添加了一个数据属性。。。试着这样做：

document.addEventListener("DOMContentLoaded", function() {

    var icons = document.getElementsByClassName("fa-baby");

    for (var i = 0; i < icons.length; i++) {

        icons[i].setAttribute("data-i", i);

        icons[i].addEventListener("click", function () {

            var index = parseInt(this.getAttribute("data-i"));

            if (index < 14) {
                this.classList.add("text-muted");
            } else {
                this.classList.toggle("text-primary");
            }
        });
    }

});

document.addEventListener（“DOMContentLoaded”，function（））{
var icons=document.getElementsByClassName（“fa baby”）；
对于（变量i=0；i

我现在创建了一个基本示例，它可以做您想做的事情。我没有使用

文本主

和

文本静音

而是使用特定的CSS类来着色。这就是JS的外观，这样您就可以实现您想要的：

var icons = document.getElementsByClassName("fa-baby");

for (let i = 0; i < icons.length; i++) {
  icons[i].addEventListener("click", function() {
    let ctn = document.getElementsByClassName("green").length;
    if (this.classList.contains("green")) {
      this.classList.remove("green");
    }else if(ctn < 14){
      this.classList.add("green");
    }
  });
}

下面是全部内容： 最佳答案…：）

有关信息：

iconBabys.forEach( Baby_X=>{...

相当于：

for (let i=0, iMax=iconBabys.length; i <iMax ; i++)
{
  let Baby_X = iconBabys[i];
  Baby_X.addEventListener("click", function(e){
    BabysCount.onClick(e)
  })
}

表{font-family:'Franklin Gothic Middle'，'Arial Strong'，Arial，sans serif}
th{背景色：青色；颜色：黄色；填充：10px；字体大小：24px}
td{背景色：rgb（228224224）；填充：0 10px；字体大小：12px}
td p{边距：8px；字体大小：18px}
.text静音{颜色：浅灰色}
.text主{颜色：绿色}

石膏
2019年3月

2019年4月

2019年5月

2019年6月

2019年7月

2019年8月

2019年11月

2019年10月

2019年11月

2019年12月

2020年1月

2020年2月

2020年3月

2020年4月

请重新格式化代码，以便更容易阅读。别忘了，你在这里寻求帮助。因此，请尽最大努力使帮助您尽可能简单愉快。int let:

for（let i=0；i

@muazbutt如前所述，请用足够的信息陈述您的问题，以便我们能够回答。如果我们不知道您需要或想要实现什么，我们将无法为您提供代码或帮助。@thex我想更改图标选择的类。但选定的图标将最多不超过14个，当选择14个图标时，将不再选择更多图标。第二件事，当选择了14个图标时，只有在我可以从现有图标中取消选择一些图标时，我才能选择更多图标。希望你这次能理解。图标[i]==14是无意义的，因为这是一个对象，而不是一个有值的数字。这段代码只适用于启动15个输入。感谢您的帮助，我想选择所有输入，但选择限制为14。

index===14

永远不会工作，因为index是一个字符串OK。逻辑不正确。无论如何，MrJ的parseInt；-）顺便说一句，他不想这样，14个应该无处不在，而不仅仅是14个第一的汉克斯兄弟。真的很有帮助谢谢你的帮助。我也很抱歉，我没有包括必要的信息，因为我不知道。下次我会记住这一点。再次感谢。@muazbutt不客气。没问题，你是新来的，因此我试图礼貌地为你指出正确的方向，以便我们能更容易地帮助你。没什么不好的，但是如果没有适当的问题，很难找到你想要什么。如果这为您解决了问题，请标记为已解决。我还有一个关于日期的问题。我应该发布另一个问题吗？@muazbutt请打开另一个问题

iconBabys.forEach( Baby_X=>{...

for (let i=0, iMax=iconBabys.length; i <iMax ; i++)
{
  let Baby_X = iconBabys[i];
  Baby_X.addEventListener("click", function(e){
    BabysCount.onClick(e)
  })
}