Присвоение класса массиву в Javascript - PullRequest
Новая
       1

Присвоение класса массиву в Javascript

0 голосов
/ 23 января 2020

У меня довольно простой вопрос, который я не могу понять.

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

Если бы текст не был в массиве, не было бы проблемы, поскольку я мог бы просто сделать это: 

var text = "<div class='text'>SOME TEXT HERE</div>";
$('.image').append(text);

В этом случае все работает нормально, и я могу применить стилизацию к тексту, который теперь является частью div с классом 'text'.

Однако мне нужно отображать разные строки текста на разных изображениях, поэтому они хранятся так: 

var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];

Все, что я хочу сделать, это сделать textArray частью div, к которому я мог бы затем добавить стиль.

Я пробовал это, но это не сработает, поскольку textArray не добавляется как часть text div : 

var text = "<div class='text'>textArray</div>";
$('.image').append(textArray[2]);

Буду признателен за любую помощь, спасибо!

Ответы [ 2 ]

0 голосов
/ 23 января 2020

Создайте элемент, добавьте к нему текст, затем добавьте его к изображению.

Я бы посоветовал вам немедленно создать отключенный jQuery объект. Это элемент html, которым вы можете манипулировать, но он еще не привязан к DOM. Вы делаете это с помощью $('<html code here>').
Таким образом, вы можете использовать все инструменты, предоставляемые jQuery.
Затем добавьте к этому текст, теперь вам не нужно вставлять строки вместе, и вы можете использовать jQuery text() функция для добавления текста. Когда ваш новый элемент закончен, вы можете добавить его в свой класс изображений.

Таким же образом вы можете сохранить ссылку на ваш текстовый элемент контейнера и использовать ее повторно, как у меня в простой функции анимации ниже. 

var current = 2;
var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];
var $text = $("<div class='text'>");
$text.text(textArray[current]);
$('.image').append($text);

/**
 * Just to illustrate that $text can be reused.
 */
$('button').on('click', (e) => {
  setInterval(() => {
    current++;
    if(current >= textArray.length) {
      current = 0;
    }
    $text.text(textArray[current]);
    },1000);
});
.image {
  width: 300px;
  height: 200px;
  background-color: green;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
</div>
<button>Rotate the texts</button>
0 голосов
/ 23 января 2020

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

Для каждого текста в массиве: 

var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];
for(var key in textArray) {
   var this_text = textArray[key]
   $('.image/element selector of your liking (can also be dynamic)').append("<div class='text'>"+this.text+"</div>");
}

Вы также можете go через каждое изображение и затем добавить текст в соответствии с положением массива:

Для каждого изображения на странице, в соответствии с текстом: 

$(".image").each(function( i ) {
       $(this).append("<div class='text'>"+textArray[i]+"</div>");
}

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

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

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

...