На веб-странице необходимо заменить выбранные элементы определенным HTMLкодом.
Решение
В решении этой задачи поможет метод replaceWith() (листинг 6.3.1).
Листинг6 .3 .1 . Использование метода replaceWith()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-6-3-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
button { display:block; width:200px; } div {
color:#369;
border:1px solid #369; width:200px; margin:3px;
text-align:center;
}
</style>
<script type="text/javascript">
$(function(){
$("button").click(function() {
$(this).replaceWith("" + $(this).text() + "");
});
});
</script>
</head>
<body>
<button>Один</button>
<button>Два</button>
<button>Три</button>
</body>
</html>
Обсуждение
HTML-разметка в листинге 6.3.1 — это просто три кнопки с надписями на них. При щелчке мышью на кнопке необходимо будет заменить кнопку, т. е. элемент button на элемент div, причем текст, написанный на кнопке, должен оказаться внутри элемента div.
Как связать функцию-обработчик события click с элементом button, мы разбирали уже много раз, поэтому перейдем сразу к функции-обработчику. Внутри нее указатель this ссылается на ту кнопку, по которой был совершен щелчок. Следовательно, мы спокойно можем применять метод replaceWith(), а в качестве его аргумента укажем HTML-код элемента div. Между открывающим и закрывающим тегами
<div> напишем выражение, получающее текст надписи на той кнопке, для которой была вызвана функция-обработчик.
Необходимо отметить, что, начиная с версии 1.4, метод replaceWith() может принимать функцию в качестве аргумента.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- 50 СПОСОБОВ ЗАСТАВИТЬ GOOGLE ЛЮБИТЬ ВАШ САЙТ (0)
- Создание релевантности: чего хотят люди (0)
- Анализ большого набора данных (0)
- Что такое селекторы и как их правильно использовать (0)
- Добавление тени к блоку (0)
- Центрирование текста (0)
- Удаление средствами CSS синей рамки вокруг изображения, выполняющего функцию ссылки (0)