Question

我正在尝试找出http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose处找到的jquery选择器测试的代码。

我收到错误：

未捕获的语法错误，无法识别的表达式：“h1”jquery.js：4241

当我在文本框中输入h1时，在Chrome开发者工具中

。在右侧，它应突出显示在<h1>标签内的“欢迎使用我的主页”。

有人可以指出我哪里出错吗？谢谢。

以下是我的代码：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(":button").click(function(){
        var hl_str= '"'+$(":text").val()+'"';
        //document.write(hl_str);
        $(hl_str).effect("highlight",{color:"ff0000"},3000);
    });
})
</script>
</head>
<body>
<input type="text">
<input type="button" value="Edit and Click Me">
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

Answer 1

构建“hl_str”字符串时不需要引号。

尝试：

var hl_str = $(":text").val();

Answer 2

我认为你只是不匹配某些对象。我建议你尝试使用contains来搜索值

jQuery('p:contains("Donald")').effect("highlight",{color:"#ff0000"},3000);

http://api.jquery.com/contains-selector/

Answer 3

effect()不是jQuery的功能。

Answer 4

我不完美，但我认为这是一种可行的方法：

JS：

$("input[type=button]").click(function(){
        var hl_str = $("input[type=text]").val();   

    $('#mycontainer').find('*').contents().each(function() {
        if(this.nodeType == 3) {
            var txt = $(this).text().replace(hl_str, '<span class="effect">'+hl_str+'</span>');
            $(this).parent().html(txt);
        }
    });

});

CSS：

.effect{ color: #ff0000; }

不能正常工作，就像你在demo看到的那样，但这是一个初始点; - ）

jquery突出显示效果

4 个答案: