Question

我一直在尝试构建一个简单的html表单，通过将其包装在表单的keyup中的span中（使用jquery）来突出显示页面上的黄色文本。

它工作正常，直到我在键盘上退格以完全清除表单的内容，然后它停止工作。我已经创建了一个快速的代码来展示我的问题：

这可能是一个非常简单的修复，但我无法理解出现问题的原因，有谁知道问题是什么？

我真的很喜欢使用'body'或'html'选择器而不是'*'，因为它影响了我的页面的头部，但是我无法使用它们中的任何一个。

HTML：

<form>
<input type="text" id="searchfor"/>
</form>
<!-- The below is just a test to check the value of the input is being returned -->
<span>Value of form: </span><span id="test"></span>

<div>
  <h3>example text here</h3>
</div>

jQuery的：

$("#searchfor").on("keyup change", function() {

  // store value in a variable
  value = this.value;

  // unwrap span from previous search
  $("span[id^='highlightspan']").contents().unwrap();

  // wrap span around inputted text
  $("*").each(function() { 
    if($(this).children().length==0) { 
      $(this).html($(this).html().replace(value, '<span id="highlightspan" style="background:yellow;">' + value + '</span>')); 
    } 
  });

  $("#test").html(value);

}）;

Answer 1

打开它们后删除highlightspan元素：

  $("span[id^='highlightspan']").contents().unwrap();
  $("span[id^='highlightspan']").remove();

这会阻止DOM上的重复ID，但最好只让highlightspan成为一个类。

示例 http://codepen.io/anon/pen/rIujD

Answer 2

Fiddle

if (value === '') {
    $('#highlightspan').remove();
}

您需要删除highlightspan，再次将其添加到此代码中$(this).html($(this).html().replace(value, '<span id="highlightspan" style="background:yellow;">' + value + '</span>'));

为什么我的动态javascript突出显示形式？

2 个答案: