Jquery选择器变量语法

Jquery selector variable syntax

本文关键字：语法 变量 选择器 Jquery      更新时间：2023-09-26

这应该是一个简单的问题，但我不能使它工作。代码取一个句子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);
}

这样做可能会奏效:

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循环中，您是从末尾到开始遍历字符串，而不是从开始到结束。

你有一些语法错误和语句在错误的地方

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>', {
   id:"line2" + i,
   html: line_2[i]
}).css("color","blue")
.addClass('letter')
.appendTo(elements);

下面是不产生任何错误的代码(基于您的原始代码):

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);
}

下面的代码删除句子并用彩色文本替换:

<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

相关文章：