Question

这实际上是this question的后续问题由于Rory McCrossan而得到了解决。我现在有这个功能正常的脚本;搜索功能，根据搜索词显示div。

JS

$('#search').click(function() {
  var txt = $('#search-criteria').val();
  if (txt)
    $('.fruit').hide().filter('#' + txt.toLowerCase()).show();
});

CSS

.fruit {
  display: none;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="fruit" id="apple">
  <h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
  <h3>Some text about oranges</h3>
</div>

我现在想知道的是，如果有人可以帮我处理添加到此脚本的某种错误处理，最好是可以顺利添加而不重写脚本的逻辑。即当搜索没有结果时和/或当用户进行空字符串搜索时，我想显示另一个带有消息的div。

由于我实际上是一名用户体验设计师，我的技术技能有限，所以如果有人能帮助我，我会非常感激...

提前致谢！

Answer 1

使用try和catch处理简单的javascipt错误： -

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>

function adddlert2($a){
alert($a);
}


try {
    adddlert("Welcome guest!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>

Answer 2

使用javascript SEARCH函数处理另一个错误（javascript示例）： -

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
try {

    var str_wrong = "Visit"; 
    var n = str.search("Visit");
    document.getElementById("demo").innerHTML = n;
   
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
	}
   
</script>

</body>
</html>

＆＃13;

Answer 3

在这种情况下，您可以使用try和catch，但如果您想了解应用程序中的所有违规行为，我更愿意为此工作使用专用服务。

我使用Sentry.io，这是一个很好的服务来处理后端和前端的异常和错误。使用简单，只需添加一个额外的JS脚本而无需修改现有代码。有关安装过程的更多信息here

Answer 4

我猜你正在寻找的是这个:)我知道改为.keyup（）与你的问题无关，所以如果你愿意，可以改回来

<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div id="default" class="fruit">
    no fruit found
</div>
<div class="fruit" id="apple">
  <h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
  <h3>Some text about oranges</h3>
</div>

和

<script>
    $(document).ready(function(){
        $('#search-criteria').keyup(function() {
            var txt = $('#search-criteria').val();
            if (txt){
                var elements = $('.fruit').hide().filter('#' + txt.toLowerCase());
                if(elements.length > 0){
                    elements.show();
                }
                else{
                    $("#default").html("No result found for "+txt);
                    $("#default").show();
                    setTimeout(function(){
                        $("#default").hide();
                    }, 1000);
                }
            }
        });
    });
</script>

Javascript搜索功能中的错误处理

4 个答案: