⇑Header titleЯ хотел бы переключаться между стрелкой вверх и стрелкой вниз каждый раз, когда пользователь щелкает тег span. function ex" />

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

javascript jquery html-entities

6369 просмотра

5 ответа

32908 Репутация автора

У меня есть следующий 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.

Автор: Sergio del Amo Источник Размещён: 27.08.2008 12:51

Ответы (5)

1 плюс

6673 Репутация автора

Проверьте эффект .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>

СЦЕНАРИЙ:

 $("#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();
 });
Автор: jason saldo Размещён: 27.08.2008 12:57

0 плюса

21155 Репутация автора

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

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

Автор: Neall Размещён: 27.08.2008 12:59

17 плюса

4757 Репутация автора

Решение

Когда анализируется 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");                           
    }
}
Автор: jelovirt Размещён: 27.08.2008 01:03

3 плюса

26768 Репутация автора

Если вы делаете предупреждение о 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;" );
};
Автор: travis Размещён: 27.08.2008 01:07

1 плюс

3340 Репутация автора

Используйте класс, чтобы сигнализировать текущее состояние диапазона. 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' );
} );

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

Автор: Juan Размещён: 27.08.2008 01:10
Вопросы из категории :
32x32