基于变量值的addClass

我想在输入表单中输入某人后添加一个类。这工作，并强调在我的网页的话咨询：基于变量值的addClass

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>

来源

2013-03-05 user2137466

抱歉 - jquery，搜索html页面。 – user2137466 2013-03-05 21:34:48

注意示例不一致第一个工作正在使用两个“和第三个（不工作）使用一个”和另一个“。 – alonisser 2013-03-05 21:40:22

'：contains'搜索元素的文本内容。你希望找到的html元素的内容是什么？你可以发布的HTML？ – Brandon 2013-03-05 21:40:39

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

最后一个片段是你发布的does actually work，然而，在类名应用到目标元素之前，你需要模糊文本输入，通过标签或点击离开它。我从JSBin示例中的:contains过滤器中删除了a选择器，并使用简单的<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>

来源

2013-03-05 21:54:03 danwellman

谢谢！我不得不添加选择器，因为你的代码突出显示了所有内容（围绕woo添加一些文本，它将全部为红色）。但我的工作，除了它是大小写敏感的，我想我可以找到在这个网站上某处的说明。 – user2137466 2013-03-06 15:14:15

我推荐使用grep这个代替复杂的CSS选择器。

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

这将让您对如何匹配更好的控制。例如，如果您希望不区分大小写，则可以使用大写或小写value和$(element).text()。

来源

2013-03-05 22:15:41

基于变量值的addClass

回答

相关问题