从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>

我遇到的问题是，我检查，看看是否有项一类，如果这样，我减少了点击次数。但它不断减去项目，所以如果我连续4次点击项目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 reference。

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

参见this fiddle。

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方法。见this fiddle：

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>