简化keyup输入的一些jQuery代码

Question

我在做什么

我正在制作一个网页,当我将内容输入到输入中时,它会自动生成论坛代码.每个角色都有不同的颜色,句子看起来像一个渐变.

这是jsfiddle样本.

当我输入a-p-p-l-e这些输入时,结果如下:

[color=3173d8]a[/color][color=416cd9]p[/color][color=5e5bdb]p[/color][color=8248dd]l[/color][color=a335df]e[/color]

---

题

当创建越来越多的输入和跨度时,js代码将变得如此庞大.但我不知道如何简化它们.我试图使用类似的东西$(this).attr('target'),它只是不起作用.如果我想添加更多输入,比如说30,那么任何人都可以帮助我缩短它.

---

更多

如果我希望焦点移动到下一个输入,如果输入已经输入了字符,该怎么办？然后我就可以用'tab'键入单词.

Answer 1

您可以像这样简化代码.

通过使用id以选择器开头来绑定keyup事件一次.

var colors = ["3173d8", "416cd9", "5e5bdb", "8248dd", "a335df"]

$("[id^=input]").each(function (i) {
    $(this).css('background', '#' + colors[i]);
});

$("[id^=input]").keyup(function () {
    var index = $("[id^=input]").index(this);
    $("span[id^=span]").eq(index).html('[color=' + colors[index] + ']' + $(this).val() + '[/color]');
});

请注意,$("[id^='input']")它将返回id以"input"开头的所有元素.

演示小提琴

编辑以更改焦点

var colors = ["3173d8", "416cd9", "5e5bdb", "8248dd", "a335df"]
$("[id^=input]").each(function(i) {
    $(this).css('background', '#' + colors[i]);
});

$("[id^=input]").keyup(function() {
    if ($(this).val().trim().length) {
        $(this).next().focus();
    }
    var index = $(this).index();
    $("span[id^=span]").eq(index).html('[color=' + colors[index] + ']' + $(this).val() + '[/color]');

});

编辑小提琴