<!DOCTYPE html>
<html>
<head>
<title>百度前端技术学院jstask8</title>
<style type="text/css">
div{
display: inline-flex;
flex-wrap: wrap;
border: 1px solid black;
padding: 20px;
margin:10px;
background-color: white;
}
</style>
</head>
<body>
<div id="all">everything
<div class="items" id="book">books
<div class="book">book1</div>
<div class="book">book2</div>
<div class="book">book3</div>
</div>
<div class="items" id="song">songs
<div class="song">song1</div>
<div class="song">song2</div>
<div class="song">song3</div>
</div>
<div class="items" id="drink">drinks
<div class="drink">drink1</div>
<div class="drink">drink2</div>
<div class="drink">drink3</div>
</div>
</div></br>
<input type="button" name="order" value="order">
<input type="text" name="search">
<input type="button" name="search" value="search">
<script type="text/javascript">
var everything = document.getElementsByClassName("all");
var items = document.getElementsByClassName("items");
var list = [];
var button = document.getElementsByTagName("input")[0];
var timer;
var searchb = document.getElementsByTagName("input")[2];
button.onclick = function (){
reset();
preOrder();
change();
}
searchb.onclick = function(){
reset();
preOrder();
search();
}
function preOrder(){
list.push(all);
for (var i = 0; i < items.length; i++) {
list.push(items[i]);
var item = items[i].children
for (var j = 0; j < item.length; j++) {
list.push(item[j]);
}
}
}
function change(){
var i = 0;
list[i].style.backgroundColor = "grey";
console.log(list.length);
timer = setInterval(
function (){
if (i<list.length-1) {
i++;
list[i-1].style.backgroundColor = "white";
list[i].style.backgroundColor = "grey";
console.log(list[i]);
console.log(i);
}else{
list[i].style.backgroundColor = "white";
clearTimeout(timer);
}
},700);
}
function reset(){
list = [];
clearTimeout(timer);
var divs = document.getElementsByTagName("div");
console.log(divs);
for (var i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = "white";
}
}
function search(){
var i = 0;
list[i].style.backgroundColor = "grey";
var input = document.getElementsByTagName("input")[1].value;
var re = new RegExp("^"+input,"g");
console.log(re);
timer = setInterval(
function (){
if (i<list.length-1 && !re.test(list[i].innerHTML)) {
i++;
list[i-1].style.backgroundColor = "white";
list[i].style.backgroundColor = "grey";
}
else if(re.test(list[i].innerHTML)){
list[i].style.backgroundColor = "blue";
alert("find it!");
clearTimeout(timer);
}
else if(i == list.length-1){
list[i].style.backgroundColor = "white";
alert("cant find it .")
clearTimeout(timer);
}
else{
console.log(re.test(list[i].innerHTML));
clearTimeout(timer);
}
},700);
}
</script>
</body>
</html>
请问这个js程序的search()函数中的第一个elseif语句，在满足条件的情况下，为什么无法执行？ 谢谢！
你的排版太惊艳啦，放在代码块里展示呀，不然显示的太可怕了
你可以截图直接贴出来的咋看啊
让人绝望窒息的排版。
这个排版样式真是让人望而却步啊
正则表达式为传参模式，可能并没有获取到值。
规范点先用个window.onload,
百度前端学院啊，高大上，我现在才知道。
正则对象有个缺点，也就是其会记录上次匹配的状态，
如：
var a = new RegExp("^drink1","g")
a.test("drink1");//true;
a.test("drink1");//false ;
至于why，大概你这里这样用正则用的很奇怪吧
然后这样就可以改写你的if下面的逻辑了
把两个==的逻辑提前，把你最开始的if提后，这样是可以得到效果的
if else if else 这样的，逻辑上要能形成严格的分支结构，不然会比较蛋疼的
所以建议是把这个正则相关独立出来，放在外面计算
re.test(list[i].innerHTML) 按照你的问题，其他地方不用看，首先你要确认能够执行到elseif，其次，你是否尝试console.log或者alert “re.test(lis，t[i].innerHTML)”，如果是true，我不相信不会继续执行，如果是false，那自然上面list可能获取的值不对。需要自查