jQuery를

Question

있는 HTML 엔티티를 비교하는 방법은 다음과 같은 HTML 코드가 있습니다

이

<h3 id="headerid"><span onclick="expandCollapse('headerid')">&uArr;</span>Header title</h3> 

내가 화살표 위, 아래 사이를 전환하려는

사용자가 스팬 태그를 클릭 할 때마다 화살표를.

function expandCollapse(id) { 
    var arrow = $("#"+id+" span").html(); // I have tried with .text() too 
    if(arrow == "⇓") {  
     $("#"+id+" span").html("⇑");    
    } else {   
     $("#"+id+" span").html("⇓");    
    } 
} 

내 기능은 항상 else 경로로 진행됩니다. 내가 javacript : alert을 arrow 변수로 만들면 화살표로 표시되는 html 엔티티가 표시됩니다. arrow 변수를 html이 아닌 문자열로 해석하도록 jQuery에 지시 할 수 있습니까?

Answer 1

HTML이 구문 분석 될 때 JQuery가 DOM에서 볼 수있는 것은 엔티티 참조가 아닌 UPWARDS DOUBLE ARROW ("⇑")입니다. 따라서 자바 스크립트 코드에서 "⇑" 또는 "\u21d1"을 테스트해야합니다. 당신이 arrow의 경고를 할 경우

function expandCollapse(id) { 
    var arrow = $("#"+id+" span").html(); 
    if(arrow == "\u21d1") {  
     $("#"+id+" span").html("\u21d3");       
    } else {    
     $("#"+id+" span").html("\u21d1");       
    } 
} 

Answer 2

.toggle() 효과를 확인하십시오.

내가 이전에 연주 한 것과 비슷한 내용입니다.

HTML :

<div id="inplace"> 
<div id="myStatic">Hello World!</div> 
<div id="myEdit" style="display: none"> 
<input id="myNewTxt" type="text" /> 
<input id="myOk" type="button" value="OK" /> 
<input id="myX" type="button" value="X" /> 
</div></div> 

SCRIPT : 브라우저가 낮은 케이스 엔티티 또는 뭔가를하기 때문에

$("#myStatic").bind("click", function(){ 
     $("#myNewTxt").val($("#myStatic").text()); 
     $("#myStatic,#myEdit").toggle(); 
}); 
$("#myOk").click(function(){ 
     $("#myStatic").text($("#myNewTxt").val()); 
     $("#myStatic,#myEdit").toggle(); 
}); 
$("#myX").click(function(){ 
     $("#myStatic,#myEdit").toggle(); 
}); 

Answer 3

어쩌면 당신이 정확하게 일치를 얻지 못하고 있습니다. 테스트 용으로 캐럿 (^)과 소문자 "v"를 사용해보십시오.

편집 - 내 첫 번째 이론은 잘못되었습니다.

Answer 4

가 무엇을 반환 않습니다 또한, 당신은 당신이로 전환하고 무엇을 변경해야합니까? 일치하는 정확한 문자열을 반환합니까? 실제 문자 '⇓' 및 '⇑'을 얻으려면 "\u21D1" 및 "\u21D3"과 일치해야 할 수 있습니다.

또한 모든 브라우저가 해당 엔티티를 지원하지는 않으므로 ⇑과 ⇓을 사용해 볼 수 있습니다.

업데이트 : 여기에 완벽하게 동작하는 예제입니다 : http://jsbin.com/edogop/3/edit#html,live

window.expandCollapse = function (id) { 
    var $arrowSpan = $("#" + id + " span"), 
     arrowCharCode = $arrowSpan.text().charCodeAt(0); 

    // 8659 is the unicode value of the html entity 
    if (arrowCharCode === 8659) { 
    $arrowSpan.html("⇑");       
    } else {    
    $arrowSpan.html("⇓");       
    } 

    // one liner: 
    //$("#" + id + " span").html(($("#" + id + " span").text().charCodeAt(0) === 8659) ? "⇑" : "⇓"); 
}; 

Answer 5

사용하는 클래스 스팬의 현재 상태를 알리기 위해. HTML은 자바 스크립트 그런 다음이

<h3 id="headerId"><span class="upArrow">&uArr;</span>Header title</h3> 

처럼 보일 수는

$('.upArrow, .downArrow').click(function(span) { 
    if (span.hasClass('upArrow')) 
     span.text("⇓"); 
    else 
     span.text("⇑"); 
    span.toggleClass('upArrow'); 
    span.toggleClass('downArrow'); 
}); 

이것은 가장 좋은 방법이 될 수 없습니다 할,하지만 작동합니다. didnt 힘든 그것을 시험하십시오