Добавление стиля к случайно сгенерированным номерам Javascript - PullRequest
Новая
       14

Добавление стиля к случайно сгенерированным номерам Javascript

0 голосов
/ 11 мая 2019

Я пытаюсь добавить стилизацию (css) и иметь возможность размещать случайно сгенерированные числа (%) в любом месте, где я хочу (в <div>, чтобы быть более конкретным), но я не знаю, как этого добиться.

Эти номера в настоящее время размещаются в конце каждого элемента списка (за пределами основного <div>, но внутри <li>).

Для ясности, вот скриншот 2 элементов списка и того, как отображается номер: https://imgur.com/gsGRlaT

HTML-код, в котором в данный момент отображаются цифры: 

<div>
   {% if  page_obj.object_list %}
       <ol class="row top20" id="my_list">

          {% for result in page_obj.object_list %}

          <li id="list_item">
              <div class="showcase col-sm-6 col-md-4">
               <a href="{{ result.object.get_absolute_url }}">
                      <h3>{{result.object.title}}</h3>
                      <h5>{{ result.object.destination }}</h5>
                      <img src="{{ result.object.image }}" class="img-responsive">
               </a>
               </div>

          <!--  Numbers are displayed randomly here --> 90%

          <!--  But I'm trying to display them in the div below -->

            <div class="numbers"> 90% </div>

          </li>

           {% endfor %}

       </ol>
</div>
    {% endif %}

И код Javascript, который генерирует числа: 

<script type="text/javascript">

  var orderedList = document.getElementById("my_list");
  var itemLength = 8; //REPLACE THIS WITH THE LENGTH OF THE ITEM LIST

  function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  // get a default 100 into the array
  var arrayOfNumbers = [100],
      listItem = document.getElementById("list_item");

  // get itemLength random numbers
  for (let i = 0; i < itemLength; i++) {
    arrayOfNumbers.push(getRandomInt(30, 100))
  }

  // sort the array of random numbers
  arrayOfNumbers.sort(function(a, b) {
    return b - a
  })

  // now do the lopping and creating elements
  for (let i = 0; i < arrayOfNumbers.length; i++) {
    let randomInt = document.createTextNode(arrayOfNumbers[i] + "%");
    listItem = document.getElementById("list_item");
    listItem.appendChild(randomInt);
    orderedList.appendChild(listItem);
  }

</script>

Так, как я могу взять под контроль, как и где эти числа размещены?

1 Ответ

1 голос
/ 11 мая 2019

Вы почти к решению. Всего несколько незначительных модификаций.

Создайте div вместо того места, где вы создаете текстовый узел, и добавьте класс numbers в созданный div. И все готово. 

for (let i = 0; i < arrayOfNumbers.length; i++) {
    let randomIntContainer = document.createElement('div');
    randomIntContainer.textContent = arrayOfNumbers[i] + "%";
    randomIntContainer.setAttribute('class', 'number');
    listItem = document.getElementById("list_item");
    listItem.appendChild(randomIntContainer);
    orderedList.appendChild(listItem);
  }
...