Как получить имя класса элементов из динамически создаваемого элемента? - PullRequest
Новая
       0

Как получить имя класса элементов из динамически создаваемого элемента?

0 голосов
/ 27 декабря 2018

Я начал создавать некоторый второстепенный код на своем сайте, и я хотел сделать некоторое динамическое создание, поэтому некоторые теги span создаются с использованием цикла javaScript for.В том же коде, но в другом цикле я хочу добавить прослушиватель событий к тегам. Ошибка, которую я получаю, заключается в том, что созданный элемент не существует, и у меня есть несколько идей, почему он не работает, но поиск в Интернете и переполнение стекане дал мне ответов.

Я подумал о том, чтобы поместить в функцию оба цикла for и вызвать эту функцию аналогичным образом, jquery работает с ее функцией готовности документа.Но я не думаю, что это решит проблему 

var country = ["is_AmericaN", "is_Europe", 
"is_Africa","is_AmericaS","is_Asia","is_Australia"];

var spanInto = document.getElementById("spanSelect");

for(i=0; i<6; i++)
{
var spanMake = document.createElement("SPAN");

spanInto.appendChild(spanMake);

spanMake.className += "spanLanguage" + " " + country[i];
}

Приведенный выше код создает элементы, код ниже пытается вызвать их 

var countryClass = doucment.getElementsByClassName("spanLanguage");
for(i=0; i< document.countryClass.length; i++)
{
countryClass[i].addEventListener("click", function(){

var hrDisplay = document.getElementById("selectiveDisplay");

hrDisplay.removeAttribute("id");

hrDisplay.className = "noDisplay";

},false);
}

Я ожидаю, что рабочий код,после нажатия на любой тег span установите отображение тега hr на block или flex.Я не хочу создавать 5-6 тегов диапазона вручную, это должно быть динамическое создание.

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Необходимо исправить несколько точек:

  • В вашем коде был тип "doucment". Вместо этого используйте "document".
  • Созданные элементы не имели ни одноготекст на нем, как вы будете называть щелчок по элементу, когда он не виден в DOM.
  • События привязаны к якорям / кнопкам, не охватывающим.
  • Не уверен, что вы пытаетесь сделать с помощьюприкрепление событий.

ниже приведен фрагмент кода, который работает для вас, когда вы пытаетесь добавить события на динамически создаваемые элементы. Дайте мне знать, если вам нужна дополнительная помощь 

function temp() {
  var country = ["is_AmericaN", "is_Europe",
    "is_Africa", "is_AmericaS", "is_Asia", "is_Australia"
  ];

  var spanInto = document.getElementById("spanSelect");

  for (i = 0; i < 6; i++) {
    var spanMake = document.createElement("a");
    spanMake.innerHTML = country[i];
    spanInto.appendChild(spanMake);

    spanMake.className += "spanLanguage" + " " + country[i];
  }
}

function attachEvent() {
  var countryClass = document.getElementsByClassName("spanLanguage");
  for (i = 0; i < countryClass.length; i++) {
    countryClass[i].addEventListener("click", function(event) {
      console.log("I am called" + event.target);
      //var hrDisplay = document.getElementById("selectiveDisplay");

      //hrDisplay.removeAttribute("id");

      //hrDisplay.className = "noDisplay";

    }, false);
  }
}
a {
  padding: 20px;
}
<body>
  <div id="spanSelect"></div>
  <div id="selectiveDisplay"> </div>
  <button onclick="temp()"> Call Me </button>
  <button onclick="attachEvent()"> Attach Event </button>
</body>
0 голосов
/ 27 декабря 2018

Вам не хватает позиции добавляющего класса 

var spanMake = document.createElement("SPAN");

spanInto.appendChild(spanMake);

spanMake.className += "spanLanguage" + " " + country[i];

Здесь вы назначаете класс после добавления его в span, что неправильно, вам нужно назначить класс раньше.

var countryClass = doucment.getElementsByClassName("spanLanguage");
for(i=0; i< document.countryClass.length; i++)
{

doucment - это document, а document.countryClass должно быть countryClass, поскольку у вас уже есть экземпляр элемента 

var country = ["is_AmericaN", "is_Europe",
  "is_Africa", "is_AmericaS", "is_Asia", "is_Australia"
];

var spanInto = document.getElementById("spanSelect");

for (i = 0; i < 6; i++) {
  var spanMake = document.createElement("SPAN");
  spanMake.textContent = country[i];
  spanMake.className += "spanLanguage" + " " + country[i];
  spanInto.appendChild(spanMake);


}

var countryClass = document.getElementsByClassName("spanLanguage");
for (i = 0; i < countryClass.length; i++) {
  countryClass[i].addEventListener("click", function() {

    var hrDisplay = this;

    hrDisplay.removeAttribute("id");

    hrDisplay.className = "noDisplay";

  }, false);
}
.noDisplay {
  display: none;
}
<span id="spanSelect"></span>
<br/>
//click on any of them to replace the class
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...