Как сравнить HTML-сущность с JQuery - PullRequest
Новая
       48

Как сравнить HTML-сущность с JQuery

11 голосов
/ 27 августа 2008

У меня есть следующий HTML-код: 

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

Я бы хотел переключаться между стрелкой вверх и стрелкой вниз каждый раз, когда пользователь щелкает тег span. 

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

Моя функция всегда идет по другому пути. Если я создаю javacript: alert переменной arrow, я получаю html-объект, представленный в виде стрелки. Как я могу сказать jQuery интерпретировать переменную arrow как строку, а не как html.

Ответы [ 5 ]

16 голосов
/ 27 августа 2008

Когда HTML анализируется, JQuery видит в DOM UPWARDS DOUBLE ARROW ("⇑"), а не ссылку на сущность. Таким образом, в вашем коде Javascript вы должны проверить на "⇑" или "\u21d1". Также вам нужно изменить то, на что вы переключаетесь: 

function expandCollapse(id) {
    var arrow = $("#"+id+" span").html();
    if(arrow == "\u21d1") {     
        $("#"+id+" span").html("\u21d3");                           
    } else {            
        $("#"+id+" span").html("\u21d1");                           
    }
}
3 голосов
/ 27 августа 2008

Если вы выдаете предупреждение arrow, что оно возвращает? Возвращает ли она ту строку, с которой вы сопоставляете? Если вы получаете фактические символы '⇓' и '⇑', возможно, вам придется сопоставить их с "\u21D1" и "\u21D3".

Также вы можете попробовать &#8657; и &#8659;, так как не все браузеры поддерживают эти объекты.

Обновление : вот полностью рабочий пример: 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("&#8657;");                           
  } else {            
    $arrowSpan.html("&#8659;");                           
  }

  // one liner:
  //$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 8659) ? "&#8657;" : "&#8659;" );
};
1 голос
/ 27 августа 2008

Используйте класс для сигнализации о текущем состоянии диапазона. HTML может выглядеть следующим образом 

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

Тогда в javascript вы делаете 

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

Возможно, это не лучший способ, но он должен работать. Не проверял это жестко

1 голос
/ 27 августа 2008

Проверьте эффект .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();
 });
0 голосов
/ 27 августа 2008

Возможно, вы не получаете точного соответствия, потому что браузер в нижнем регистре сущности или что-то в этом роде. Попробуйте использовать карат (^) и строчные буквы "v" только для тестирования.

Отредактировано - моя первая теория была совершенно неверной.

...