0

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

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>
4

2 回答 2

1

我建议使用grep它而不是复杂的 CSS 选择器。

JsFiddle 展示了它是如何工作的：http: //jsfiddle.net/GZHA4/1/

这将使您更好地控制它的匹配方式。例如，如果您想要不区分大小写，您可以将valueand都大写或小写$(element).text()。

于 2013-03-05T22:15:41.377 回答
0

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

您发布的最后一个片段确实有效，但是，在将类名应用于目标元素之前，您需要通过制表符或单击远离它来模糊文本输入。我在 JSBin 示例中a从过滤器中删除了选择器，并改用了简单的。:contains<p>

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

<!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>
于 2013-03-05T21:54:03.197 回答