从javascript列表中选择最多x个项目

Question

我有一个项目列表，希望用户可以选择最多三个项目。 我有下面的代码。

 var listItems = document.querySelectorAll('li'); var clickcnt = 0; for(var i = 0; i < listItems.length; i++){ listItems[i].addEventListener('click', function(event) { if(this.hasAttribute('class')){ var test = document.getElementsByClassName('clicked'); this.classList.remove('clicked'); clickcnt--; } else if(clickcnt < 3) { this.classList.add('clicked'); clickcnt++; } console.log(clickcnt); }); } 

  .clicked { background-color:red; } 

 <p>select up to 3 of your favourite items below.</p> <ul id="mylist"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> 

我遇到的问题是，我正在检查该项目是否具有一个类，如果这样做，我将减少点击次数。 但是它会不断减去项目，因此，例如，如果我连续四次单击项目1，则可以选择其他四个项目。

我该如何进行设置，以便用户可以继续单击某个项目，直到选择了最多3个项目，但是如果他们两次单击同一项目，它将删除该项目，使其处于初始状态？

Answer 1

 var listItems = document.querySelectorAll('li'); var toggleClicked = function(event) { var _class = 'clicked'; if (-1 < this.className.indexOf(_class)) { this.classList.remove(_class); } else if (3 > document.getElementsByClassName(_class).length) { this.classList.add(_class); } else { console.warn('Oops !'); } console.log('No. elements:', document.getElementsByClassName(_class).length, 'with class:', _class); }; for (var i = 0; i < listItems.length; i++) { listItems[i].addEventListener('click', toggleClicked); } 

 .clicked { background-color: red; } 

 <p>select up to 3 of your favourite items below.</p> <ul id="mylist"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> 

Answer 2

您可以使用clickcnt = Math.max(clickcnt - 1, 0); -选择两个值中的最大值。 如果clickcnt - 1低于0，则只会返回0。 请参阅MDN参考 。

添加一个类并将其删除后，检查是否存在一个类将失败，因为它不会删除属性，而只会删除该类。 如果使用classList则可以使用this.classList.contains('clicked') 。

看到这个小提琴 。

var listItems = document.querySelectorAll('li');
var clickcnt = 0;
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', function (event) {
        if (this.classList.contains('clicked')) {
            this.classList.remove('clicked');
            clickcnt = Math.max(clickcnt - 1, 0);
        } else if (clickcnt < 3) {
            this.classList.add('clicked');
            clickcnt++;
        }
    });
}

要清理一点，您可以只使用一个if和classList对象中的toggle方法。 看到这个小提琴 ：

var listItems = document.querySelectorAll('li');
for (var i = 0; i < listItems.length; i++) {
   listItems[i].addEventListener('click', clicked);
}

function clicked() {
    var clickCount = document.getElementsByClassName('clicked').length;
    var el = this;
    if (clickCount >= 3) {
        this.classList.remove('clicked');
    } else {
        this.classList.toggle('clicked');
    }
}

要拥有一个全局变量，您可以将其引用为其他函数中的点击计数，您可以将代码更改为：

var listItems = document.querySelectorAll('li');
var clickCount = 0;

for (var i = 0; i < listItems.length; i++) {
   listItems[i].addEventListener('click', clicked);
}

function clicked() {
    var el = this;
    if (clickCount >= 3) {
        this.classList.remove('clicked');
    } else {
        this.classList.toggle('clicked');
    }
   clickCount = document.getElementsByClassName('clicked').length;
}

Answer 3

试试这个-> http://jsfiddle.net/sumeetp1991/nybf6kk6/

var listItems = document.querySelectorAll('li');
var clickcnt = 0;
for(var i = 0; i < listItems.length; i++){
     listItems[i].addEventListener('click', function(event) {
      if(this.className){
        this.className = "";
        clickcnt--;
      }
      else if(clickcnt < 3) {
      this.className = "clicked";
      clickcnt++;
      }
    console.log(clickcnt);
    });

}

Answer 4

像那样？

 var listItems = document.querySelectorAll('li'); var clickcnt = 0; var myList = document.querySelector('#mylist'); myList.addEventListener('click', function(event) { var itemClassList, selected, canAdd; itemClassList = event.target.classList; canAdd = clickcnt < 3; if (itemClassList.contains('clicked')) { itemClassList.remove('clicked'); clickcnt -= 1; } else if (canAdd) { itemClassList.add('clicked'); clickcnt += 1; } }); 

 .clicked { background-color:red; } 

 <p>select up to 3 of your favourite items below.</p> <ul id="mylist"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul>