Làm thế nào để so sánh một thực thể html với jQuery

Question

Tôi có đoạn code html sau:

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

Tôi muốn chuyển đổi giữa mũi tên lên và mũi tên xuống mỗi lần người dùng nhấp vào thẻ span.

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

Chức năng của tôi luôn đi theo đường dẫn khác. Nếu tôi thực hiện một javacript: cảnh báo của arrow biến Tôi nhận được thực thể html đại diện như một mũi tên. Làm cách nào tôi có thể yêu cầu jQuery giải thích biến số arrow dưới dạng chuỗi chứ không phải dưới dạng html.

Answer 1

Khi HTML được phân tích cú pháp, những gì JQuery thấy trong DOM là UPWARDS DOUBLE ARROW ("⇑"), không phải là tham chiếu đối tượng. Do đó, trong mã Javascript của bạn, bạn nên kiểm tra "⇑" hoặc "\u21d1". Ngoài ra, bạn cần phải thay đổi những gì bạn đang chuyển sang:

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

Answer 2

Kiểm tra hiệu ứng .toggle().

Đây là điều gì đó tương tự như tôi đã chơi với trước đó.

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

Có lẽ bạn không nhận được một kết hợp chính xác vì trình duyệt thấp-vỏ thực thể hoặc một cái gì đó. Hãy thử sử dụng carat (^) và chữ thường "v" chỉ để thử nghiệm.

Đã chỉnh sửa - Lý thuyết đầu tiên của tôi sai.

Answer 4

Nếu bạn làm một cảnh báo của arrow những gì hiện nó trở lại? Nó có trả lại chuỗi chính xác mà bạn đang đối đầu không? Nếu bạn đang nhận được các ký tự thực tế '⇓' và '⇑', bạn có thể phải đối sánh nó với "\u21D1" và "\u21D3".

Ngoài ra, bạn có thể muốn thử ⇑ và ⇓ vì không phải tất cả trình duyệt đều hỗ trợ các thực thể đó.

Cập nhật: đây là một ví dụ làm việc đầy đủ: 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

Sử dụng một lớp để báo hiệu tình trạng hiện thời của nhịp. Các html có thể trông như thế này

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

Sau đó, trong javascript bạn làm

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

Điều này có thể không phải là cách tốt nhất, nhưng nó phải làm việc. Didnt kiểm tra nó khó khăn