使用遞增的類名將類應用於類似命名的div

我想根據具有類似命名的類的文本輸入來操作div。使用遞增的類名將類應用於類似命名的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/

我幾乎有我想，因爲這作品，未經遞增，但不與它，所以它應該是我使用的語法。

來源

2014-03-28 sventizzle

看到http://jsfiddle.net/arunpjohny/BLZRX/1/ –

這是真棒，這是我更新小提琴使用你的代碼中，實際上做一些事情:) HTTP的方式：// jsfiddle.net/6cte3/1/ 非常感謝！ – sventizzle

我將它作爲回答發佈 –

這將是更好的組中的元素與一個共同的類，並使用它像

<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

來源

2014-03-28 00:25:47

我遇到的一個問題是，我實際上已將每個輸入包裹在一個div中，所以現在看起來好像「索引」不再起作用... http：// jsfiddle.net/6cte3/3/ – sventizzle

@sventizzle，因爲現在目標'div'不是輸入的下一個兄弟，它是輸入的父代的下一個兄弟... http://jsfiddle.net/arunpjohny/6cte3/4/- 如果您更改標記結構，則有時必須更改遍歷/選擇器 –

因此，您可以使用.parent（）。next（）來訪問「索引」，這很好。我對javascripting非常陌生，所以這些細節不屬於我的noobie知識。謝謝一堆。 – sventizzle

你會需要遍歷遍歷所有的元素，然後綁定你的處理程序。

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

但我會強烈建議agains做這種方式！通過看你的提琴，如果你有機會到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'); 
});

來源

2014-03-28 00:26:57

plaese看到這個小提琴：http://jsfiddle.net/6cte3/3/，看看你的代碼是否仍然有意義，輸入都實際上包裹着divs ...我認爲這會打破增加的能力 – sventizzle

使用遞增的類名將類應用於類似命名的div

回答

相關問題