Question

这应该是一个简单的问题，但我无法使其发挥作用。代码采用句子line_2并为每个字母line_2[i]设置动画，我想为每个字母添加一种颜色。我添加了一个变量heya并使用了一个选择器，如代码中所示，但它不起作用。我可能很简单。

以下是代码：

for (i = line_2.length - 1; i >= 0; i--) {
    $('<div>', {
        var heya = "line2" + i;
        html: '<br><br><br><br>' + '<div id= ' + heya + '>' + line_2[i] + '</div>'
    })
    $("#" + heya).css("color", "blue");
    .addClass('letter')
        .appendTo(elements);
}

Answer 1

更像这样的东西可以解决问题：

for (i = line_2.length-1; i >=0; i--) 
{
    var heya ="line2" + i;

    $('<div></div>', {
        html: '<br><br><br><br>' + '<div id=\"' + heya +'\">' + line_2.charAt(i) + '</div>'
    })
    .css("color","blue")
    .addClass('letter')
    .appendTo(elements);
}

要明确的是，使用i--循环中的for，您将从头到尾经过字符串而不是从头到尾。

Answer 2

您在错误的位置有一些语法错误和语句

var heya ="line2" + i;需要在{}之外，否则你会在那里遇到错误

你可能想要：

var heya ="line2" + i;
$('<div>', {
    html: '<br><br><br><br>' + '<div id="' + heya +'">' + line_2[i] + '</div>'
});

此外，由于您的元素尚未添加到dom但尚未使用jQuery(selector)来选择它，您必须为jQuery提供要搜索的上下文

var ele = $('<div>', {
   html: '<br><br><br><br>' + '<div id="' + heya +'">' + line_2[i] + '</div>'
});
jQuery("#"+heya,ele).css("color","blue")
.addClass('letter')
.appendTo(elements);

但是我不明白你为什么要创建一个包装div，因为你只是使用内部div，你可以用以下方法简化它：

$('<div>', {
   id:"line2" + i,
   html: line_2[i]
}).css("color","blue")
.addClass('letter')
.appendTo(elements);

Answer 3

以下代码不会产生任何错误（基于原始代码）：

for (i = line_2.length-1; i >=0; i--) {
    var heya = "line2" + i;
    $('<div>', {
        html: '<br><br><br><br>' + '<div id= ' + heya +'>' + line_2[i] + '</div>'
    });

    $("#" + heya).css("color","blue")
        .addClass('letter')
        .appendTo(elements);
}

Answer 4

此代码删除句子并将其替换为彩色文本：

<span id="line_2">Lazy</span>

function execute() {
    var line2 = $('#line_2');
    var colors = ['blue','red','green','gray'];
    var txt = line2.text();
    line2.empty();
    for (var i = 0; i < txt.length; i++) {
        line2.append('<span style="color: ' + colors[i] + '">' + txt[i] + '</span>');
    }
}
execute();

JsFiddle

Jquery选择器变量语法

4 个答案: