Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2017, 13:06
Интересующийся
Отправить личное сообщение для banditman Посмотреть профиль Найти все сообщения от banditman
 
Регистрация: 23.04.2017
Сообщений: 16

Проблема с кодом
Приветствую всех форумчан!
Подскажите как мне исправить ситуацию, написал скрипт замены на странице текста ссылки на картинку с текстом, все получилось заменить, НО! Перестал работать 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>');
}


Заранее благодарю за помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 19.05.2017, 13:26
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

Работа с «innerHTML» родителя удаляет у дочерних элементов все навешанные на них обработчики.
Ответить с цитированием
  #3 (permalink)  
Старый 19.05.2017, 13:31
Интересующийся
Отправить личное сообщение для banditman Посмотреть профиль Найти все сообщения от banditman
 
Регистрация: 23.04.2017
Сообщений: 16

А чем то "innerHTML" заменить можно, как выйти из данной ситуации?
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2017, 13:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

banditman,
ищите ссылки, удаляйте текст textContent = "", затем создавайте и вставляйте элементы или insertAdjacentHTML.
Ответить с цитированием
  #5 (permalink)  
Старый 19.05.2017, 13:39
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

banditman,
document.createElement + привешивание обработчиков,
element.appendChild, element.removeChild

Смотри, например
https://javascript.ru/forum/misc/688...hekboksov.html
Ответить с цитированием
  #6 (permalink)  
Старый 19.05.2017, 15:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

множественная замена текста ссылок
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>
Ответить с цитированием
  #7 (permalink)  
Старый 19.05.2017, 16:23
Интересующийся
Отправить личное сообщение для banditman Посмотреть профиль Найти все сообщения от banditman
 
Регистрация: 23.04.2017
Сообщений: 16

ок, спасибо отчасти это решило проблему с другими скриптами, НО напрочь вырубило все остальные ссылки!
Ответить с цитированием
  #8 (permalink)  
Старый 19.05.2017, 16:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

banditman,
может вы не убрали строки 35-40?
Ответить с цитированием
  #9 (permalink)  
Старый 19.05.2017, 16:51
Интересующийся
Отправить личное сообщение для banditman Посмотреть профиль Найти все сообщения от banditman
 
Регистрация: 23.04.2017
Сообщений: 16

да, спасибо, закоментировалась почему то только 36-37-38-39 )))
Ответить с цитированием
  #10 (permalink)  
Старый 23.05.2017, 13:00
Интересующийся
Отправить личное сообщение для banditman Посмотреть профиль Найти все сообщения от banditman
 
Регистрация: 23.04.2017
Сообщений: 16

Спасибо еще раз за помощь в данном вопросе, получилось сделать подобны код, все работает, но теперь еще момент интересен, а как можно задать последовательность вывода элементов, а то при обновлении и они постоянно меняю порядок!?
Вот код который у меня получился
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-белое золото

Заранее благодарю за помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с кодом javascript javamen Общие вопросы Javascript 7 25.08.2016 20:04
Проблема с кодом Хан Events/DOM/Window 2 31.07.2016 22:17
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07