Как повторить один и тот же код (но немного отличается каждый раз) в HTML?

94 просмотра

2 ответа

Итак, я работаю над проектом, и одна страница содержит один и тот же базовый код снова и снова, и мне было интересно, как это сделать быстрее, чем копировать / вставлять код 721 раз

<div class="pokeFloat">
  <div class="pokeDec">
    <p>
      <img class="pokeImg" src="./img/pokeDex#.jpg" />
      <br>
      <small>PokeDex#</small>
      <br>pokemonName
      <br>
      <span class="typeA">TypeA</span class="TypeA"> - <span class="TypeB">TypeB</span class="TypeB">
	</p>
  </div>
</div>

Каждый раз мне приходилось менять pokeDex # (дважды, один раз в ссылке, другой в тексте), pokemonName и оба типа, и было бы здорово, если бы был более быстрый способ сделать это.

Автор: Skwarka Источник Размещён: 08.11.2019 11:29

Ответы (2)


0 плюса

Решение

Вы можете просто настроить таргетинг на родительский контейнер, а затем использовать jQuery для создания необходимого количества элементов. Одна строка HTML ... затем цикл jQuery для заполнения этого контейнера всем остальным, 721 раз .....

var num = 721; //number of times you want definitions

for(var i = 1; i <= num; i++) {
    var theContent = $("<p></p>").html('<small>PokeDex #' + i + '</small> : <a href="/path/to/dex' + i +'">Dex ' + i + ' Link</a>'); 
         $('#pHolder').append(theContent);
     }
p { background: #eee; margin: 10px; padding: 5px 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pHolder"></div>

ванильный Javascript (без JQuery)

var elem = document.getElementById("pHolder"); //The holder
 var num = 721; //number of times you want definitions

for(var i = 1; i <= num; i++) {
     var p = document.createElement('p');
     p.innerHTML = '<small>PokeDex #' + i + '</small> : <a href="/path/to/dex' + i +'">Dex ' + i + ' Link</a>';
  elem.appendChild(p);
     }
p { background: #eee; margin: 10px; padding: 5px 10px; }
    <div id="pHolder"></div>

Возиться с див ...

Автор: Scott Размещён: 21.08.2016 01:00

-1 плюса

Если вы не можете использовать технологию на стороне обслуживания или что-то, что компилируется в html как Haml, и вы хотите использовать javascript и html ... с небольшой помощью jquery, чтобы вам не пришлось изобретать велосипед ... ,

Одним из решений было бы скрыть HTML, который вы используете в качестве шаблона. Затем, используя jquery (или другую библиотеку или ванильный javascript), возьмите его как строку, сделайте замены, а затем вставьте полученную строку как html в dom.

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

На вашем месте я бы использовал библиотеку типа Knockout, Angular или Mustache.

// Data of each iteration
var data = [
  {name: 'Pikachu', dex: 'pikachuDex', typeA: 'pikachuA', typeB: 'pikachuB'},
  {name: 'Charmander', dex: 'charmanderDex', typeA: 'charmanderA', typeB: 'charmanderB'},
  {name: 'Ratata', dex: 'ratataDex', typeA: 'ratataA', typeB: 'ratataB'}
];
  
// Get the template
var template = $(".pokeFloat").html();

// Iterate over data, customize template, append to html
for(var i = 0; i < data.length; i++) {
  var str = template.replace(/typeA/gi, data[i].typeA);
  str = str.replace(/typeB/gi, data[i].typeB);
  str = str.replace(/pokemonName/gi, data[i].name);
  str = str.replace(/pokeDex/gi, data[i].dex);
  
  $("#list_of_pokemones").append(str)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pokeFloat" style="display: none">
      <div class="pokeDec">
        <p>
          <img class="pokeImg" src="./img/pokeDex#.jpg" />
          <br>
          <small>PokeDex#</small>
          <br>pokemonName
          <br>
          <span class="typeA">TypeA</span class="TypeA"> - <span class="TypeB">TypeB</span class="TypeB">
    	</p>
      </div>
    </div>

<div id="list_of_pokemones">
</div>

Обратите внимание, что я спрятал шаблон, используя display: none, и добавил новый в divкачестве заполнителя для динамически генерируемого HTML.

Это не лучшее решение, но оно должно дать вам представление о том, как это сделать.

Автор: Fernando Размещён: 21.08.2016 01:33
Вопросы из категории :
32x32