如何解决如何获得用户输入的内容与数组中的内容的精确匹配
当用户在搜索字段中输入数字时,具有该数字的图像将填充一个图像轮。当用户键入49时,应该显示数字49的图像。取而代之的是,当前代码为我提供了编号为4的所有图像和编号为9的所有图像(例如14、19、244、596等),而不是返回一个图像#49。 filter()无效,includes()无效,indexOf()无效。如何获得与输入数字相对应的一张图像?
function searchInspired() {
$(".treatment").each(function() {
$(this).removeClass('searched');
});
var searchNum = document.getElementById('searchField').value; //user input
//treatments is an array of images declared globally
for (var i=0; i<treatments.length; i++){
if (treatments[i].number.toString().indexOf(searchNum) !== -1){
console.log(treatments[i]);
treatments[i].$elem.addClass('searched');
}
}
$('.treatment').each(function(index,el){
if(!$(el).hasClass('searched')){
$(el).hide();
}
else{
$(el).show();
}
});
}
解决方法
类重置代码可能无法正常工作,导致始终显示“ 49”的“ 4”的问题。我会尝试使您的重置功能看起来更像您的显示/隐藏功能。
$('.treatment').each(function(index,el){
$(el).removeClass('searched');
})
您的匹配项检查以查看他们键入的字符是否出现在图像编号'149'.indexOf('49')
中的任何地方,并且通过您的检查。您可以通过很多方法来强制其完全匹配,我建议您将两者都保留为数字,而只做searchNum === treatments[i].number
。
可能的例子:
var searchNum = Number(document.getElementById('searchField').value);
if(isNaN(searchNum)) {
return; //bad input,don't show any images
}
然后您只需检查匹配的图像即可:
if (treatments[i].number === searchNum) {
...add the class...
}
,
您可以过滤治疗阵列,然后映射到
treatments.filter(function(treatment){
return treatment.number.toString() === searchNum.toString()
}).each(function(treatment){
treatment.$elem.addClass('searched');
});
$(".treatment").not(".searched").show();
$(".treatment.searched").hide();
,
我能够解决这个问题。添加中断时,我的原始代码可以正常工作,因此它不再循环并提供完全匹配的内容
for (var i=0; i<treatments.length; i++){
if (treatments[i].number.toString().indexOf(searchNum) !== -1){
treatments[i].$elem.addClass('searched');
break;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。