Question

我想在输入表单中有人输入后添加一个类。这有效，并在我的页面中突出显示“咨询”一词：

var value = "Advisory"; 

$("a:contains("+ value +")").addClass("highlight");

这样可以并向我显示一个警告，显示用户键入的内容：

$(document).ready(function() {


$("#filterinput").change(function(){
var value = $(this).val();

alert(value);

});
});

但是这不起作用（我尝试了各种引号组合等）：

$(document).ready(function() {


$("#filterinput").change(function(){
var value = $(this).val();


$("a:contains('"+ value +"')").addClass("highlight").load();


   });
});

有人可以帮忙吗？

编辑。我的代码很长，但这里是我要搜索的html示例。第一个工作的例子突出了“历史保护咨询委员会”的全文，因为这是锚标签之间的内容。

<ul class="treebranch">
  <li class="govdocs"> <a href="http://www.archives.gov/federal-register/acfr/">Administrative Committee of the Federal Register</a></li>
  <li class="govdocs"> <a href="http://www.achp.gov/index.html">Advisory Council on Historic Preservation</a></li>
  <li class="govdocs"> <a href="http://www.abmc.gov/home.php">American Battle Monuments Commission</a></li>
  <li class="govdocs"> <a href="http://www.arc.gov/">Appalachian Regional Commission</a></li>
  <li class="govdocs"> <a href="http://www.access-board.gov/">Architectural and Transportation Barriers Compliance Board (Access Board)</a></li>
  <li class="govdocs"> <a href="http://www.arctic.gov/">Arctic Research Commission</a></li>
  <li class="govdocs"> <a href="http://www.afrh.gov/">Armed Forces Retirement     Home</a></li> 
</ul>

Answer 1

我建议使用grep代替复杂的CSS选择器。

JsFiddle展示它的工作原理：http://jsfiddle.net/GZHA4/1/

这样可以更好地控制匹配方式。例如，如果您想要不区分大小写，则可以大写或小写value和$(element).text()。

Answer 2

为什么在将类添加到所选元素后调用load()？ jQuery有两个load()方法，一个是从服务器加载数据并将其插入所选元素的AJAX方法。另一种是将事件处理程序添加到要在DOM中加载后要执行的元素。这两种方法都不合适，你想做什么？

您发布的最后一个片段does actually work，但是，在将类名应用于目标元素之前，您需要通过Tab键或单击它来模糊文本输入。我从JSBin示例中的a过滤器中删除了:contains选择器，并使用了简单的<p>。

最好在输入上使用keyup事件而不是更改事件，然后在键入键后应用该类：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .highlight { color:red; }
</style>
</head>
<body>
  <p>woo</p>
  <input id="filterinput"/>

  <script>
      $(document).ready(function () {


          $("#filterinput").keyup(function () {
              var value = $(this).val(),
                  target = $(":contains('" + value + "')");

              if (!target.hasClass("highlight")) {
                target.addClass("highlight");
              }
          });
      });
  </script>
</body>
</html>

addClass基于变量值

2 个答案: