Вставить HTML в конкретный c HTML элемент-компонент в нескольких экземплярах - PullRequest
Новая
       5

Вставить HTML в конкретный c HTML элемент-компонент в нескольких экземплярах

0 голосов
/ 25 мая 2020

У меня есть компонент вкладок, который вставляет .textContent с JavaScript во вкладку «Результаты», и все работает нормально.

Я хотел бы использовать этот компонент вкладки более одного раза на странице.

На данный момент я использую идентификаторы в качестве селекторов для JavaScript, но, очевидно, мне нужно будет изменить это на классы, если они используются в нескольких экземплярах.

Я упростил код ниже, но У меня две проблемы:

a) Заставить метод forEach() работать

b) Как подойти к нему, чтобы код в каждом компоненте вкладок вводился в соответствующую вкладку результатов, если компонент используется более чем в одном экземпляре на странице.

Мне нужно добиться этого, не давая разным элементам компонента разные имена классов, когда он используется в разных экземплярах (т.е. не .result-tab-1 в одном компоненте и .result-tab-2 на другом компоненте).

В приведенном ниже коде я закомментировал то, что пытаюсь сделать, и оставил исходную версию, чтобы вы могли видеть, что должно произойти.

Любой помощь будет принята с благодарностью.

Codepen: https://codepen.io/emilychews/pen/gOayOLo?editors=1010

// var to check if element is on the page
var HTMLTab = document.getElementById("html-tab");

var injectCodeInResultsTab = function () {
  if (HTMLTab) {
  
    var HTMLCodeId = document.getElementById("language-html-id")
    document.getElementById("result-tab").innerHTML = HTMLCodeId.textContent

    //     // select the class
    //     var HTMLCodeClass = document.querySelectorAll(".language-html-class")
    //     var resultTab = document.querySelectorAll(".result-tab")

    //     // use forEach() to places the inner text content inside the related result tab
    //     // even if this component is used multiple times on a page

    //     HTMLCodeId.forEach(function (item) {

    //     })
  }
}

injectCodeInResultsTab()
body {
  margin: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs-wrapper {
  position: relative;
}

.result-tab {
  background: red;
  color: white;
  padding: 1rem;
  text-align: center;
}
.result-title {
  margin-bottom: 0;
  background: black;
  color: #fff;
}
<div class="tabs-wrapper">
  <div class="html-tab" id="html-tab">
    <pre class="pre-html">
        <code class="code language-html-class" id="language-html-id">
        &lt;h2&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quis quam in maiores.&lt;/h2&gt;
        &lt;p&gt;Repudiandae accusamus quos perferendis, saepe aspernatur deserunt facere molestiae quas eius odit eaque dolorum assumenda et aliquid.&lt;/p&gt;
ВКЛАДКА РЕЗУЛЬТАТОВ
...