请问一下,这个js程序的search函数部分哪里出错了? 谢谢! 3C
 <!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语句,在满足条件的情况下,为什么无法执行? 谢谢!

7个回答

你的排版太惊艳啦,放在代码块里展示呀,不然显示的太可怕了

louiset
louiset 更新了。。。忘记代码片了。。
2 年多之前 回复

你可以截图直接贴出来的咋看啊

louiset
louiset 更新了。。现在可以了
2 年多之前 回复

让人绝望窒息的排版。

louiset
louiset 更新了。。没有插入代码片好可怕
2 年多之前 回复

这个排版样式真是让人望而却步啊

louiset
louiset 哈哈哈。。论代码片的重要性
2 年多之前 回复

正则表达式为传参模式,可能并没有获取到值。

规范点先用个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可能获取的值不对。需要自查

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问