Question

我想将类添加到多个SPAN（但不是所有SPAN）。在这种情况下，我选择将类添加到最后2个SPAN。

所以目前我的代码是字符串，然后将每个字母作为SPAN插入html。

然后我想让代码读取跨度的最后2个（或任何其他数量）以添加另一个.class（在这种情况下为.blue）

我相信这是我需要使用的代码的一部分，但是因为我在做+ =，所以它会向html添加另一个额外的SPAN，从而导致重复。

if (i >= 5) {
    html += '<span class="blue blast">' + split[i] + '</span>';
}

此处提供完整代码和CodePen：

function myFunction() {
    var string = document.querySelector('.title').innerHTML
    var split = string.split('');
    var html = '';

    for (let i = 0; i < split.length; i++) {
        html += '<span class="blast">' + split[i] + '</span>';

        if (i >= 5) {
            html += '<span class="blue blast">' + split[i] + '</span>';
        }

    }

    document.querySelector('.title').innerHTML = html;
}
myFunction()

https://codepen.io/MariusZMM/pen/MZdpNb

我已经有可为我完成此操作的jQuery代码。但是我想学习Vanila JavaScript。

更新：在tymeJV的帮助下，我用一个修复程序更新了CodePen： https://codepen.io/MariusZMM/pen/pqmwgL

Answer 1

您只想在i > 5时写蓝色字母-将其他部分包裹在else块中

    if (i >= 5) {
        html += '<span class="blue blast">' + split[i] + '</span>';
    } else {
        html += '<span class="blast">' + split[i] + '</span>';
    }

Answer 2

这是我的主张

function myFunction(num) {
  const splitted = document.querySelector('.title').innerHTML.split('');

  const newContent = splitted.map((letter, i) => {
    const className = i >= splitted.length - num ? 'blue blast' : 'blast';

    return '<span class="'+className+'">' + letter + '</span>';
  }).join('');

  document.querySelector('.title').innerHTML = newContent;
}

myFunction(3);

将类添加到特定的多个SPAN

2 个答案: