javascript — метод jQuery .text () не работает для изменения элементов абзаца html во встроенных файлах html.

Метод jQuery .text () не работает для изменения элементов абзаца html встроенных файлов html

Я разрабатываю веб-страницу для отображения информации о растениях. Каждое растение содержится в собственной «карточке растения». Теперь общая идея состоит в том, чтобы иметь единое html-определение для карточек растений ( PlantCard.html ), которое затем загружается в различные div на главной странице с помощью jQuery, чтобы избежать повторения кода. Затем, чтобы все эти карты растений отображали различную информацию, мне нужно изменить элементы внутри PlantCard.html .

jsfiddle: https://jsfiddle.net/King_Fish/nxv3jtz5/2/

Теперь первоначальная проблема состоит в том, чтобы изменить имя завода, что должно быть сделано путем изменения значения абзаца с идентификатором plant_name внутри div класса plantcard_name (этот код находится в PlantCard.html , странице, встроенной в Main.html page):

 {amp}lt;div class="plantcard_name"{amp}gt; {amp}lt;p id="plant_name"{amp}gt;Pepperomia{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; 

В настоящее время страница PlantCard.html загружается в три разных PlantCard.html с идентификаторами: test , test1 и test2 (внутри Main.html ). Затем, при попытке запросить абзац ( plant_name ) определенного div, скажем, с идентификатором test , и изменить его текст с помощью метода text(String text) , ничего не происходит. :

 $("#test").find('.plant_name').text("Changed text"); 

Чтобы проверить, работает ли функция text (String text), я создал тестовый абзац внутри Main.html, а затем попытался получить его ссылку из файла javascript и изменить его текст, что было успешно:

(это определение абзаца в Main.html):

 {amp}lt;p id="testParagraph"{amp}gt;Test to change here!{amp}lt;/p{amp}gt; 

(Это JavaScript)

 $(document).ready(function() { loadPlantCards(); $("#testParagraph").text("New text"); }); 

Я полагаю, что метод text(String text) был успешным, потому что во втором подходе запрашиваемый абзац уже был в Main.html , тогда как абзац plant_name является абзацем, содержащимся во внешнем html-файле, который затем загружается в основной файл. , Как сделать так, чтобы текстовый метод также работал с абзацами из внешних HTML-файлов?

Изменить: Чтобы проверить типы запрашиваемых элементов, я добавил некоторый код, чтобы найти тип testParagraph и все три различных запрашиваемых абзаца класса plant_name .

Это текущий метод $(document).ready(function() { ... } :

 $(document).ready(function() { loadPlantCards(); $("#testParagraph").text("New text"); if($("#testParagraph").is("p")) { console.log("Testpara is of type p"); } else { console.log("Testpara is not of type p"); } }); 

Теперь последний оператор if проверяет, имеет ли найденный элемент с идентификатором testParagraph тип p ( {amp}lt;p{amp}gt; ). При загрузке страницы это утверждение оценивается как истинное, как и ожидалось.

Затем, однако, я также выполнил ту же проверку элементов, которые запрашиваются методом $(plantCardIds[i]).find(".plant_name") . Я обнаружил, что ни один из трех элементов не относится к типу p ( {amp}lt;p{amp}gt; ) … Следовательно, запрашиваемые элементы не являются абзацами !? Почему это так?

Эта проверка используется для последних элементов внутри цикла foor:

  for(i = 0; i {amp}lt; plantInfo.length; i  ) { $(plantCardIds[i]).load("PlantCard.html", null, function(responseTxt, statusTxt, xhr) { if(statusTxt == "success") { console.log("External content loaded successfully; i="   i); } if(statusTxt == "error") { console.log("Error: "   xhr.status   " | "   xhr.statusTxt); } //TODO: find a way to change the plant names... you need to access plant_name inside PlantCard! var plantNameTextView = $(plantCardIds[i]).find(".plant_name"); console.log("plantNameTextView = "   plantNameTextView); //plantNameTextView.text(plantInfo[i].plantName); if(plantNameTextView.is("p")) { console.log("plantNameTextView is of type p"); } else { console.log("plantNameTextView is not of type p"); } }); } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector