Создание повторяющейся переменной из списка переменных (массив) - PullRequest
0 голосов
/ 14 сентября 2018

Это может быть довольно простой вопрос, но я, кажется, не могу найти простой ответ от траления в Интернете в течение часа или около того.

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

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

Я понимаю, что, возможно, мог бы добавить переменные к [1] ​​и ссылаться на них тоже, но результат должен быть один за другим.

Заранее спасибо.

var creativedesign1 = 'Packaging Design';
var creativedesign2 = 'Exhibition Design';
var creativedesign3 = 'Retail Design';
var creativedesign4 = 'Stationery Design';
var creativedesign5 = 'Presentation Design';
var creativedesign6 = 'Brochure Design';
var creativedesign7 = 'Leaflet Design';
var creativedesign8 = 'Apparel Design';
var creativedesign9 = 'Signage & Livery Design';
var creativedesign10 = 'CGI';
var creativedesign11 = 'Promotional Videos';
var creativedesign12 = 'Photography';
var creativedesign13 = 'Press Advert Design';
var creativedesign14 = 'Digital Advert Design';

var creativedesignspans = '<span>' + creativedesign1.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign2.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign3.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign4.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign5.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign6.split('').join('</span><span>') + '</span>' + '<br>';

console.log(creativedesignspans);

jQuery('.servicebox').mouseleave(function(){
jQuery('.css-typing').empty();
jQuery('.css-typing span').css('display','none');
});

jQuery('.servicebox').mouseenter(function(){
setTimeout( function(){
jQuery(this).find('.main:after').css('display','none');
},200);
});

jQuery('.servicebox.branding').mouseenter( function(){

setTimeout( function(){
jQuery(creativedesignspans).hide().appendTo('.css-typing-branding').each(function (i) {
    jQuery(this).delay(16 * i).css({
        display: 'inline',
        opacity: 0
    }).animate({
        opacity: 1
    }, 100);
});
},200);

});
.servicebox {
  background:lightblue;
  padding:10px 30px 30px 30px;
  font-family:sans-serif;
}
.servicebox h2 {
color:#fff;
}

.css-typing {
    font-size: 16px !important;
    text-transform: none !important;
    line-height: 1.5;
    margin-top: 20px;
    display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fl-col fl-node-5b471c0898883 fl-col-small servicebox branding" data-node="5b471c0898883">
	<div class="fl-col-content fl-node-content">
	<div class="fl-module fl-module-html fl-node-5b97c796a1dad serviceheading branding" data-node="5b97c796a1dad">
	<div class="fl-module-content fl-node-content">
		<div class="fl-html">
	<h2 style="text-align: left;"><span class="main" style="font-size: 30px;">Test Example</span><span class="css-typing css-typing-branding"></span></h2></div>
	</div>
</div>
<div class="fl-module fl-module-rich-text fl-node-5b5ecd0b402b4 fl-animation fl-slide-left servicedesc slideInLeft fl-animated" data-node="5b5ecd0b402b4" data-animation-delay="0.0">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	</div>
	</div>
</div>
	</div>
</div>

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

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

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

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

Вы можете увеличить или уменьшить время, изменив число в тайм-ауте: j * 100 до j * 300 (будет медленнее)

var div = document.getElementById("result");
var creativeDesigns = ['Packaging Design',
  'Exhibition Design',
  'Retail Design',
  'Stationery Design',
  'Presentation Design',
  'Brochure Design',
  'Leaflet Design',
  'Apparel Design',
  'Signage & Livery Design',
   'CGI',
  'Promotional Videos',
  'Photography',
  'Press Advert Design',
  'Digital Advert Design'
]

for (var i = 0; i < creativeDesigns.length; i++){
  let word = creativeDesigns[i];
  let elem = document.createElement("span"); 
  elem.className = "word-wrapper"
  for (var j = 0; j < word.length; j++){
    let char = word[j];
    setTimeout(() => {
      elem.textContent += char;
    }, j * 100)    
  }
  div.appendChild(elem);
}
.word-wrapper{
  margin: 8px;
  min-width: 50px;
  border: 1px solid;
  display: inline-block;
  padding: 6px;
}
<div id="result"></div>
0 голосов
/ 14 сентября 2018

Я думаю, вы довольно близки к тому, что вам нужно. Хранение строк в массиве и последующее сопоставление этого массива - это то, что вам нужно сделать.

Это старый фрагмент кода.

const designs = [
  'Packaging Design',
  'Exhibition Design',
  'Retail Design',
  'Stationery Design',
  'Presentation Design',
  'Brochure Design',
  'Leaflet Design',
  'Apparel Design',
  'Signage & Livery Design',
  'CGI',
  'Promotional Videos',
  'Photography',
  'Press Advert Design',
  'Digital Advert Design',
]

const creativedesignspans = designs.map((design) => {
  return `<span>${design.split('').join('</span><span>')}</span><br>`
})

document.getElementById("designs").innerHTML = creativedesignspans.join('')
<div id="designs"></div>

EDIT: Чтобы анимации работали, вы должны использовать то, что у вас уже есть. Просто введите creativedesignspans.join('') вместо creativedesignspans ниже полный код.

const designs = [
  'Packaging Design',
  'Exhibition Design',
  'Retail Design',
  'Stationery Design',
  'Presentation Design',
  'Brochure Design',
  'Leaflet Design',
  'Apparel Design',
  'Signage & Livery Design',
  'CGI',
  'Promotional Videos',
  'Photography',
  'Press Advert Design',
  'Digital Advert Design',
]

const creativedesignspans = designs.map((design) => {
  return `<span>${design.split('').join('</span><span>')}</span><br>`
})

setTimeout( function(){
jQuery(creativedesignspans.join('')).hide().appendTo('.css-typing-branding').each(function (i) {
jQuery(this).delay(16 * i).css({
    display: 'inline',
    opacity: 0
}).animate({
    opacity: 1
}, 100);
});
},200);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="css-typing-branding"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...