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

这是此代码的小提琴：http://jsfiddle.net/W99vQ/

我认为，我几乎在那里，因为这不会增加，但不会增加，所以它应该是我使用的语法。

Answer 1

最好使用公共类对元素进行分组，并将其用作

之类的选择器

<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

Answer 2

您需要遍历所有元素，然后绑定您的处理程序。

for(var j = 1; true; j++)
{
  if($('pI_nameText' + i).length == 0)
  {
    break;
  }
  $('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');
  });
}

但是我强烈建议再次这样做！通过查看你的小提琴，如果你有权访问html，我可能会为你的pI_元素添加另一个类：

<input class="pI_nameText1 anotherClass"></input>
<div class="nameLights1 anotherClass_Lights"></div>

然后立即绑定它们。

$('.anotherClass').focus(function(){
  $(this).next('.anotherClass_Lights').addClass('lightOverlay');
});
$('.anotherClass').blur(function(){
  $(this).next('.anotherClass_Lights').removeClass('lightOverlay');
});

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

2 个答案: