변수 값을 기반으로 한 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

예가 일치하지 않는 경우 첫 번째 작업은 두 개를 사용하고 "세 번째 (작동하지 않음)는 한 번 사용"하고 다른 한 개는 사용합니다. – alonisser

': contains'는 요소의 텍스트 내용을 검색합니다. 당신이 찾고자하는 HTML 요소의 내용은 무엇입니까? HTML을 게시 할 수 있습니까? – Brandon

왜 당신이 선택한 요소에 클래스를 추가 한 후 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

감사합니다! 코드가 모든 것을 강조하기 때문에 선택기를 추가해야했습니다 (일부 텍스트를 추가하면 모두 빨간색으로 나타납니다). 하지만 대소 문자를 구분한다는 점을 제외하고는 제대로 작동합니다.이 사이트의 어딘가에서 지침을 찾을 수 있다고 생각합니다. – user2137466

을 내가 대신이에 대한 grep를 사용하는 것이 좋습니다 복잡한 CSS 선택자. 작동 방법을 보여주는

JsFiddle는 : http://jsfiddle.net/GZHA4/1/

이것은 당신이 일치하는 방법을 더 잘 제어 할 줄 것이다. 예를 들어 대소 문자를 구분하지 않으려면 대문자 또는 소문자 모두 value과 $(element).text()을 사용할 수 있습니다.

출처

2013-03-05 22:15:41

변수 값을 기반으로 한 addClass

답변

관련 문제