Hoe om 'n HTML-entiteit met jQuery te vergelyk

StackOverflow https://stackoverflow.com/questions/30003

Vra

Ek het die volgende html-kode: 

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

Ek wil graag wissel tussen oppyltjie en afpyltjie elke keer as die gebruiker op die span-etiket klik. 

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

My funksie gaan altyd die ander pad.As ek 'n javascript maak:waarskuwing van arrow veranderlike Ek kry die html-entiteit wat as 'n pyl voorgestel word.Hoe kan ek vir jQuery sê om die arrow veranderlike as 'n string en nie as html nie.

Was dit nuttig?

Oplossing

Wanneer die HTML ontleed word, is wat JQuery in die DOM sien a UPWARDS DOUBLE ARROW ("⇑"), nie die entiteitverwysing nie.Dus, in jou Javascript-kode moet jy toets vir "⇑" of "\u21d1".Jy moet ook verander waarna jy oorskakel:

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

Ander wenke

As jy 'n waarskuwing van arrow wat gee dit terug?Gee dit die presiese string waarteen jy pas?As jy die werklike karakters kry '⇓' en '⇑' jy sal dit dalk moet pas "\u21D1" en "\u21D3".

Ook wil jy dalk probeer &#8657; en &#8659; aangesien nie alle blaaiers daardie entiteite ondersteun nie.

Opdateer:hier is 'n volledig werkende voorbeeld:http://jsbin.com/edogop/3/edit#html, regstreeks

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("&#8657;");                           
  } else {            
    $arrowSpan.html("&#8659;");                           
  }

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

Gebruik 'n klas om die huidige toestand van die span aan te dui.Die html kan so lyk

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

Dan doen jy in die javascript

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

Dit is dalk nie die beste manier nie, maar dit behoort te werk.Het dit nie moeilik getoets nie

Kyk na die .toggle() effek.

Hier is iets soortgelyks waarmee ek vroeër gespeel het.

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>

SKRIF:

 $("#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();
 });

Miskien kry jy nie 'n presiese passing nie omdat die blaaier die entiteit of iets kleinletters het.Probeer om 'n karaat (^) en kleinletters "v" te gebruik net om te toets.

Geredigeer - My eerste teorie was duidelik verkeerd.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top