Как сравнить HTML-сущность с JQuery
6369 просмотра
5 ответа
У меня есть следующий HTML-код:
<h3 id="headerid"><span onclick="expandCollapse('headerid')">⇑</span>Header title</h3>
Я хотел бы переключаться между стрелкой вверх и стрелкой вниз каждый раз, когда пользователь щелкает тег span.
function expandCollapse(id) {
var arrow = $("#"+id+" span").html(); // I have tried with .text() too
if(arrow == "⇓") {
$("#"+id+" span").html("⇑");
} else {
$("#"+id+" span").html("⇓");
}
}
Моя функция всегда идет по другому пути. Если я создаю javacript: alert arrow
переменной, я получаю html-объект, представленный в виде стрелки. Как я могу сказать jQuery интерпретировать arrow
переменную как строку, а не как HTML.
Ответы (5)
17 плюса
Когда анализируется 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 плюса
Если вы делаете предупреждение о arrow
том, что он возвращает? Возвращает ли она ту строку, с которой вы сопоставляете? Если вы получаете реальных персонажей '⇓'
и '⇑'
вам, возможно, придется сопоставить их с "\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) ? "⇑" : "⇓" );
};
Автор: travis
Размещён: 27.08.2008 01:07
1 плюс
Используйте класс, чтобы сигнализировать текущее состояние диапазона. HTML может выглядеть так
<h3 id="headerId"><span class="upArrow">⇑</span>Header title</h3>
Затем в JavaScript вы делаете
$( '.upArrow, .downArrow' ).click( function( span ) {
if ( span.hasClass( 'upArrow' ) )
span.text( "⇓" );
else
span.text( "⇑" );
span.toggleClass( 'upArrow' );
span.toggleClass( 'downArrow' );
} );
Это может быть не лучшим способом, но это должно работать. Не проверял это жестко
Автор: Juan Размещён: 27.08.2008 01:101 плюс
Проверьте эффект .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 плюса
Может быть, вы не получаете точного соответствия, потому что браузер в нижнем регистре сущности или что-то. Попробуйте использовать карат (^) и строчную букву "v" только для тестирования.
Отредактировано - моя первая теория была совершенно неверной.
Автор: Neall Размещён: 27.08.2008 12:59Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- jquery Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?
- jquery Получение идентификатора элемента, который вызвал событие
- html-entities Добавление объектов HTML с использованием содержимого CSS
- html-entities Евро или другое лицо в Javascript alert / messagebox
- html-entities Как преобразовать символы в объекты HTML, используя простой JavaScript
- html-entities Декодировать сущности HTML в строку Python?
- html-entities & NBSP; отображает крошечную линию