Проблема с кодом
Приветствую всех форумчан!
Подскажите как мне исправить ситуацию, написал скрипт замены на странице текста ссылки на картинку с текстом, все получилось заменить, НО! Перестал работать JAVA на странице, и другие компоненты больше не функционируют из-за конструкции - document.body.innerHTML Замена требуется так как модуль может выводить в фильтре только ссылками, а мне нужно к ним прикрутить картинки . Ошибок в консоле нет!!! Вот собственно сам код: window.onload=function(){
document.body.innerHTML = document.body.innerHTML.replace('Фантазии', '<img style="height:97px" src="images/opravy/icon_ring_from_above_8.png" width="97" height="97"><p class="op-f-ring">Фантазии</p>');
document.body.innerHTML = document.body.innerHTML.replace('Классика', '<img style="height:97px" src="images/opravy/icon_ring_from_above_3.png" width="97" height="97"><p class="op-f-ring">Классика</p>');
document.body.innerHTML = document.body.innerHTML.replace('Паве', '<img style="height:97px" src="images/opravy/icon_ring_from_above_9.png" width="97" height="97"><p class="op-f-ring">Паве</p>');
document.body.innerHTML = document.body.innerHTML.replace('Сет', '<img style="height:97px" src="images/opravy/icon_ring_from_above_7.png" width="97" height="97"><p class="op-f-ring">Сет</p>');
document.body.innerHTML = document.body.innerHTML.replace('Три камня', '<img style="height:97px" src="images/opravy/icon_ring_from_above_6.png" width="97" height="97"><p class="op-f-ring">Три камня</p>');
document.body.innerHTML = document.body.innerHTML.replace('Бортовой камень', '<img style="height:97px" src="images/opravy/icon_ring_from_above_1.png" width="97" height="97"><p class="op-f-ring">Бортовой камень</p>');
document.body.innerHTML = document.body.innerHTML.replace('Напряжение', '<img style="height:97px" src="images/opravy/icon_ring_from_above_2.png" width="97" height="97"><p class="op-f-ring">Напряжение</p>');
document.body.innerHTML = document.body.innerHTML.replace('Свадебный набор', '<img style="height:97px" src="images/opravy/icon_ring_from_above_4.png" width="97" height="97"><p class="op-f-ring">Свадебный набор</p>');
document.body.innerHTML = document.body.innerHTML.replace('Уникум', '<img style="height:97px" src="images/opravy/icon_ring_from_above_5.png" width="97" height="97"><p class="op-f-ring">Уникум</p>');
}
Заранее благодарю за помощь! |
Работа с «innerHTML» родителя удаляет у дочерних элементов все навешанные на них обработчики.
|
А чем то "innerHTML" заменить можно, как выйти из данной ситуации?
|
banditman,
ищите ссылки, удаляйте текст textContent = "", затем создавайте и вставляйте элементы или insertAdjacentHTML. |
banditman,
document.createElement + привешивание обработчиков, element.appendChild, element.removeChild Смотри, например https://javascript.ru/forum/misc/688...hekboksov.html |
множественная замена текста ссылок
banditman,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.op-f-ring {
color: hsla(240, 100%, 50%, 1);
background-color: hsla(90, 100%, 50%, 1);
}
</style>
</head>
<body>
<div id="p">:-))))<div>
<a href="">Фантазии</a> :-D
</div>
<ul>
<li>Фантазии</li>
</ul>
<div>
<a href="">Классика</a>
</div>
<ul>
<li>Классика</li>
</ul></div>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('a'), function(item) {
item.addEventListener('click', function(event) {
event.preventDefault();
alert(item.textContent);
});
}); //для проверки сохранения клика по ссылке
var data = {"Фантазии" : "8", "Классика":"3"};
var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
while (treeWalker.nextNode()) {
var el = treeWalker.currentNode;
if(el.parentNode.tagName !== "A") continue;
Object.keys(data).forEach(function(key) {
while (~el.data.indexOf(key)) {
var next = el.splitText(el.data.indexOf(key));
el.parentNode.insertAdjacentHTML("afterBegin", '<img style="height:97px" src="images/opravy/icon_ring_from_above_'+data[key]+'.png" width="97" height="97"><p class="op-f-ring">'+key+'</p>');
el = next.splitText(key.length);
next.parentNode.removeChild(next)
}
})
};
});
</script>
</body>
</html>
|
ок, спасибо отчасти это решило проблему с другими скриптами, НО напрочь вырубило все остальные ссылки!
|
banditman,
может вы не убрали строки 35-40? |
да, спасибо, закоментировалась почему то только 36-37-38-39 )))
|
Спасибо еще раз за помощь в данном вопросе, получилось сделать подобны код, все работает, но теперь еще момент интересен, а как можно задать последовательность вывода элементов, а то при обновлении и они постоянно меняю порядок!?
Вот код который у меня получился window.addEventListener('DOMContentLoaded', function() {
var data = {"все металлы" : "all_metal", "585-желтое золото" : "yellow_gold_585", "750-желтое золото" : "yellow_gold_750", "585-белое золото" : "white_gold_585", "750-белое золото" : "white_gold_750"};
var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
while (treeWalker.nextNode()) {
var el = treeWalker.currentNode;
if(el.parentNode.tagName !== "A") continue;
Object.keys(data).forEach(function(key) {
while (~el.data.indexOf(key)) {
var next = el.splitText(el.data.indexOf(key));
el.parentNode.insertAdjacentHTML("afterBegin", '<img style="height:60px" src="/images/opravy/icon_'+data[key]+'.png" width="60" height="60">');
el = next.splitText(key.length);
next.parentNode.removeChild(next)
}
})
};
});
а порядок нужен вот такой: 1. Все металлы 2. 585-желтое золото 3. 585-белое золото 4. 750-желтое золото 5. 750-белое золото Заранее благодарю за помощь! |
| Часовой пояс GMT +3, время: 21:38. |