Question

我有以下HTML；我试图编写一些JavaScript来选择最多14个图标，然后将类从“文本静音”切换为“文本基本”。选择了14个图标后，它将被禁用，并且将无法再在类之间进行切换。

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

var icons = document.getElementsByClassName("fa-baby");


for (int i = 0; i < icons.length; i++) {

  icons[i].addEventListener("click", function() {

    if (icons[i] === 14 || icons[i] > 14) {

      this.style.classList.add("text-muted");

    } else {

      this.style.classList.toggle("text-primary");

    }
  })
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<table class="table ">

  <tbody>
    <tr>
      <td>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <select class="mdl-textfield__input" id="octane2" name="octane2">
            <option value="Mar 2019">Mar 2019</option>
            <option value="Apr 2019">Apr 2019</option>
            <option value="Mai 2019">Mai 2019</option>
            <option value="Jun 2019">Jun 2019</option>
            <option value="Jul 2019">Jul 2019</option>
            <option value="Aug 2019">Aug 2019</option>
            <option value="Sep 2019">Sep 2019</option>
            <option value="okt 2019">Okt 2019</option>
            <option value="Nov 2019">Nov 2019</option>
            <option value="Dez 2019">Dec 2019</option>
            <option value="Jan 2020">Jan 2020</option>
            <option value="Feb 2020">Feb 2020</option>
            <option value="March 2020">Mar 2020</option>
            <option value="March 2020">Apr 2020</option>
          </select>
          <label class="mdl-textfield__label" for="octane2">Geschlecht</label>
        </div>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>April 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>May 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>June 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>July 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>Auguest 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>Setember 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>October 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>November 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>December 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>January 2020</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>Febuary 2020</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>March 2020</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>April 2020</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
  </tbody>
</table>

Answer 1

我现在创建了一个基本示例，该示例可以执行您想要的操作。我没有使用text-primary和text-muted而是使用特定的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");
    }
  });
}

您必须确定所选元素的count，例如green并在每次单击元素时检查当前计数。我添加了这个新的CSS类，以更好地演示选择，因为对我来说text-muted和text-primary没有得到正确的结果。也许我犯了一些错误，但甚至认为此突出显示更适合演示。最终的解决方案可能会适应CSS类的添加和删除。另外，代码可能可以简化或改进。它应该只是思想的食物。

.green{
  color: green;
}

这是完整的小提琴： https://jsfiddle.net/khwd9tam/

Answer 2

“ 最佳”答案...：）

const
  MaxBabys = 14
  ,
  iconBabys = document.querySelectorAll('td>i.fa-baby') // Be precise, babies can be anywhere!
  ,
  BabysCount = {
      count : 0,
      onClick(e)
      {
        let ClassElm = e.target.classList;

        if (ClassElm.contains('text-primary'))
        {
          ClassElm.remove('text-primary');
          ClassElm.add('text-muted');
          this.count--;
        }
        else if (MaxBabys > this.count)
        {
          ClassElm.remove('text-muted');
          ClassElm.add('text-primary');
          this.count++;
        }
        else
          { alert(` Babies limit !  (${MaxBabys})`) }
      }
    }
  ;

iconBabys.forEach( Baby_X=>{
  Baby_X.addEventListener('click', e=>{BabysCount.onClick(e)})
});

有关信息：

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)
  })
}

const
  MaxBabys = 14
  ,
  iconBabys = document.querySelectorAll('td>i.fa-baby') // Be precise, babies can be anywhere!
  ,
  BabysCount = {
      count : 0,
      onClick(e)
      {
        let ClassElm = e.target.classList;

        if (ClassElm.contains('text-primary'))
        {
          ClassElm.remove('text-primary');
          ClassElm.add('text-muted');
          this.count--;
        }
        else if (MaxBabys > this.count)
        {
          ClassElm.remove('text-muted');
          ClassElm.add('text-primary');
          this.count++;
        }
        else
          { alert(` Babies limit !  (${MaxBabys})`) }
      }
    }
  ;

iconBabys.forEach( Baby_X=>{
  Baby_X.addEventListener('click', e=>{BabysCount.onClick(e)})
});

table { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif }
th { background-color:teal; color: yellow;padding: 10px; font-size: 24px }
td { background-color: rgb(228, 224, 224); padding: 0 10px; font-size: 12px}
td p { margin: 8px; font-size: 18px}
.text-muted { color:lightslategrey }
.text-primary { color:green }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<table class="table ">
  <thead>
      <tr> <th colspan="3">Geschlecht</th> </tr>
  </thead>
  <tbody>
    <tr>
      <td><p>March 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>April 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>May 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>June 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>July 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>Auguest 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>Setember 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>October 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>November 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>December 2019</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>January 2020</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>Febuary 2020</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>March 2020</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
    <tr>
      <td><p>April 2020</p></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
      <td><i class="text-muted fas fa-baby fa-2x"></i></td>
    </tr>
  </tbody>
</table>

Answer 3

您的代码存在一些问题。触发点击事件时，您尝试捕获的变量正在改变。我添加了一个数据属性...试试这样：

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");
            }
        });
    }

});

用于限制图标onclick事件监听器的Javascript代码

3 个答案: