Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2019, 17:15
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 16

appendChild,removeChild
Помогите, пожалуйста, разобраться

Хотелось бы сделать чтобы при нажатие на 1 добавился и при повторном нажатии удалялся узел <div class="one">Текст1</div>

А если сразу после после нажатия на 1 кликнуть по 2 то добавить второй узел <div class="one">Текст2</div>, а первый узел удалить

В теге div меняется только текст

<span class="name">1</span>
<span class="name">2</span>


Буду очень благодарен!

Последний раз редактировалось Андрей812, 26.06.2019 в 17:22.
Ответить с цитированием
  #2 (permalink)  
Старый 26.06.2019, 17:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,501

Андрей812,
есть 400 вариантов
поиск - форум - открывашка
Ответить с цитированием
  #3 (permalink)  
Старый 27.06.2019, 12:53
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 16

Спасибо, но по поиску открывашка нет решения моей проблемы.

Напишу подругому - есть код, в котором при нажатии на span отображается div (ему присваивается display:block)

Помогите, пожалуйста, чтобы при нажатии на span добавлялся узел div. Т.е чтобы ДО клика в теге span div не было


<span class="helptip" onclick="helptip(this)">
       <div class="help_content">Текст<div class="jclose"></div></div>
</span>


function helptip(t) {
    helptip.v = 0;
    var b = t.children[(t.children.length-1)];
    if (b.style.display=="block") helptipx();
    else {
        helptipx();
        b.style.display = "block";
        helptip.v = 1;
    }
}
function helptipx() {
    if (helptip.v==1) {
        helptip.v = 0;
        return;
    }
    var s = document.querySelectorAll(".helptip");
    for (var i=0; i < s.length; i++) {
        s[i].children[(s[i].children.length-1)].style.display = "none";
    }
}
Ответить с цитированием
  #4 (permalink)  
Старый 27.06.2019, 15:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,501

Андрей812,
что не так в данных примерах
https://javascript.ru/forum/dom-wind...tml#post494186
https://javascript.ru/forum/css-html...tml#post494297
Сообщение от Андрей812
Напишу подругому
не понял ваще описание
Ответить с цитированием
  #5 (permalink)  
Старый 27.06.2019, 19:29
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 16

В примерах которые вы указали, div присутствует в html верстке и при клике меняется только css стиль. А я хочу чтобы div при клике на span добавлялся (append). Т.е при загрузке странице был только
<span class="helptip" onclick="helptip(this)"></span>

а при клике на span был уже
<span class="helptip" onclick="helptip(this)">
       <div class="help_content">Текст<div class="jclose"></div></div>
</span>
Ответить с цитированием
  #6 (permalink)  
Старый 27.06.2019, 20:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,501

зависимые клики
Андрей812,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .helptip {
     height: 35px;
     background-color: hsl(328, 100%, 54%);
     width: 200px;
     display: block;
     margin: 4px;
    }

  </style>

  <script>
     document.addEventListener("click", ({target}) => {
     if (target.closest(".helptip")) {
     const html = `<div class="help_content">Текст<div class="jclose"></div></div>`,
           content = target.querySelector(".help_content"),
           otherСontent = document.querySelector(".helptip .help_content");
     if(otherСontent && otherСontent != content) otherСontent.remove();
     content ? content.remove() : target.insertAdjacentHTML("beforeEnd", html);
        }
    })
  </script>
</head>

<body>
<span class="helptip"></span>
<span class="helptip"></span>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 27.06.2019, 21:20
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 16

СПАСИБО ОГРОМНОЕ!!
Ответить с цитированием
  #8 (permalink)  
Старый 28.06.2019, 23:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,501

зависимые клики, Custom Elements
Андрей812,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .helptip {
     height: 35px;
     background-color: hsl(328, 100%, 54%);
     width: 200px;
     display: block;
     margin: 4px;
    }

  </style>

  <script>
   const cssText = `<style type="text/css">
                           .help_content {
                           text-align: center;
                           line-height: 35px;
                           position: relative;
                           }
                           .jclose:after{font-size: 32px;
                           padding: 4px;
                           line-height: 8px;
                           height: 8px;
                           right: 2px;
                           top: -16px;
                           position:  absolute;
                           content: "\u0353";
                           color:  hsl(0, 0%, 100%); }
                   </style>`,
          htmlText =  `<div class="help_content">Текст<div class="jclose"></div></div>`;
   class Attention extends HTMLDivElement {
     constructor(html, cls) {
       super();
       this.parentClass = cls;
       this.attachShadow({mode: 'open'});
       this.shadowRoot.innerHTML = html;
       document.addEventListener("click", this.eventHandler.bind(this));
     }
     eventHandler({target}) {
       if(target = target.closest(this.parentClass)) {
         target === this.parentNode ? this.remove() : target.append(this);
       }
     }
   }
   window.customElements.define('help-element', Attention,{extends: 'div'});
   new Attention(cssText + htmlText, `.helptip`);
  </script>
</head>

<body>
<span class="helptip"></span>
<span class="helptip"></span>
</body>
</html>

Последний раз редактировалось рони, 28.06.2019 в 23:31.
Ответить с цитированием
Ответ



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

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