jquery - 使用递增的类名将类应用于类似命名的 div

Question

我想根据具有类似名称的类的文本输入来操作 div。

例如，如果输入名为 foo1，我希望对 div1 进行操作，如果输入为 foo2，我希望对 div2 进行操作。

这是我使用的代码片段:

var i = (i + 1);
$('.pI_nameText + (i) ').focus( function() {
    $(".nameLights + (i) ").addClass("lightOverlay"); });
$('.pI_nameText + (i) ').blur( function() {
    if ($(".pI_nameText + (i) ").val() == '') {
        console.log($(".pI_nameText + (i) ").val());
        $(".nameLights + (i) ").removeClass('lightOverlay')
    }
})

这是这段代码的 fiddle :http://jsfiddle.net/W99vQ/

我想我快到了，因为这在没有递增的情况下有效，但没有递增，所以它应该是我正在使用的语法。

Answer 1

最好将元素分组为一个公共(public)类，并将其用作选择器，如

<input class="pI_nameText name1"></input>
<div class="nameLights"></div>
<input class="pI_nameText name2"></input>
<div class="nameLights"></div>
<input class="pI_nameText name3"></input>
<div class="nameLights"></div>
<input class="pI_nameText name4"></input>
<div class="nameLights"></div>
<input class="pI_nameText name5"></input>
<div class="nameLights"></div>

然后

jQuery(function () {
    $('.pI_nameText').focus(function () {
        $(this).next().addClass("lightOverlay");
    }).blur(function () {
        if (this.value == '') {
            $(this).next().removeClass('lightOverlay')
        }
    })
})

演示:Fiddle