Заменить / повернуть несколько слов в предложении с помощью скриптов или CSS анимации - PullRequest
Новая
       19

Заменить / повернуть несколько слов в предложении с помощью скриптов или CSS анимации

1 голос
/ 05 августа 2020

Я пытаюсь заменить / повернуть несколько разных слов в абзаце на моем веб-сайте (Wordpress). Я нашел сценарий, который позволяет мне изменить один набор слов, но не могу понять, как изменить следующий набор. 

var words = ["one", "two", "three"];
var i = 0;
var text = "one";

function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
console.log(i);
return text.replace(/one/, words[i]);
}

function _changeText() {
var txt = _getChangedText();
console.log(txt);
document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 3000);
<h4>Count to <span id="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

Ответы [ 2 ]

1 голос
/ 05 августа 2020

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

Если это помогло вам, пожалуйста, утвердите это в качестве ответа. 

; // This is a javascript object used as a hashmap
var changeList = {
  "one": "two",
  "two": "three",
  "three": "four",
  "four": "five",
  "five": "six",
  "six": "seven",
  "seven": "eight",
  "eight": "nine",
  // ...
}

function _changeText() {
  let els = document.querySelectorAll('.word-changer');
  //iterate over all .word-changer elements
  for (let i = 0; i < els.length; i++) {
    let el = els[i];
    // read out elements data-counter and data-max attributes
    let counter = parseInt(el.dataset.counter);
    let max =  parseInt(el.dataset.max);
    
    if(counter < max ) {
      // Update counter and replace word based on the "hashmap"
        counter++;
      el.innerHTML = changeList[el.textContent]; // This is where the words get swapped
      el.dataset.counter = counter;
    }
  }
}

setInterval(_changeText, 3000);
<h4>
Count to <span class="word-changer" data-counter="0" data-max="2">one</span> and <span class="word-changer" data-counter="0" data-max="2">four</span> and <span class="word-changer" data-counter="0" data-max="2">six</span>.
</h4>
0 голосов
/ 05 августа 2020

непонятно, что именно вы ищете. 

var words = ["one", "two", "three"];
var i = 0;
var cnt =0;
var text = "one";

function _getChangedText() {
i = (i + 1) % words.length;
return  words[i];
}

function _changeText() {
var txt = _getChangedText();
//console.log(document.getElementsByClassName("changer")[cnt]);
document.getElementsByClassName("changer")[cnt].innerHTML = txt;
cnt++ ;
cnt=cnt % 2;
}

for(let i=0;i<2;i++){

setInterval("_changeText()", 3000);

}
<h4>Count to <span class="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>

<h4>Count to <span class="changer">one</span> and (four, five, six) and (seven, eight, nine).</h4>
...