Форум

Андрей812 · #1 (**permalink**) 26.06.2019, 17:15

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

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

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

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

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

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

рони · #2 (**permalink**) 26.06.2019, 17:28

Андрей812,
есть 400 вариантов
поиск - форум - открывашка

Андрей812 · #3 (**permalink**) 27.06.2019, 12:53

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

Напишу подругому - есть код, в котором при нажатии на 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

Андрей812,
что не так в данных примерах
https://javascript.ru/forum/dom-wind...tml#post494186
https://javascript.ru/forum/css-html...tml#post494297

Сообщение от Андрей812

Напишу подругому

не понял ваще описание

Андрей812 · #5 (**permalink**) 27.06.2019, 19:29

В примерах которые вы указали, 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

Андрей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>

Андрей812 · #7 (**permalink**) 27.06.2019, 21:20

СПАСИБО ОГРОМНОЕ!!

рони · #8 (**permalink**) 28.06.2019, 23:27

Андрей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>

Форум

Справочник

Discord чат

Курсы javascript