這個+類選擇器？

Question

目前，我有三個輸入字段。當其中有文字時，錨點會顯示在右側。目前，當我輸入一個時，所有三個輸入字段都會顯示錨點。

我需要知道的是，有一個jQuery的這+類選擇？例如： $(this + '.more')

這是我現在需要的東西，我似乎無法在jQuery API中找到它或類似的東西。

HTML：

<div id="max"> 

    <span class="sub title">Max</span> 
    <input type="text" /><a class="more" href="" onclick="">...more</a> 

</div><div id="onepoint"> 

    <span class="sub title">One Point</span> 
    <input type="text" /><a class="more" href="" onclick="">...more</a> 

</div><div id="leftover"> 

    <span class="sub title">Leftover</span> 
    <input type="text" /><a class="more" href="" onclick="">...more</a> 

</div> 

的Javascript：

$('#max input[type=text], #onepoint input[type=text], #leftover input[type=text]').on('change', function() { 
    if($(this).val() == '') { 
    $('.more').hide(); 
    } else { 
    $('.more').show(); 
    } 
}); 

如果我有選擇剛剛$('.more')所有三個切換時，我只希望是正確的了。我將如何做到這一點？

Answer 1

它是在改變input元件的下一個同級所以使用.next()和改變顯示使用.toggle()代替後到下一個元素的目標顯示/隱藏

$('#max input[type=text], #onepoint input[type=text], #leftover input[type=text]').on('change', function() { 
    $(this).next('.more').toggle($(this).val() != ''); 
}); 

Answer 2

可以使用next()輸入

$('input[type=text]', '#max, #onepoint, #leftover').on('change', function() { 
    $(this).next('.more').toggle(!!this.value.length); 
}); 

FIDDLE

Answer 3

我個人建議修改你最初的選擇ng到：

$('div[id] > input[type="text"]').on('change', function(){ 
    $(this).next('a').toggle(this.value.length); 
}); 

JS Fiddle demo。

或者，要使用的特定元素id S作爲標識符（但仍縮短選擇器鏈一點）：

$('#max, #onepoint, #leftover').find('input[type="text"]').on('change', function(){ 
    $(this).next('a').toggle(this.value.length); 
}).change(); 

JS Fiddle demo。

參考：

• Attribute-equals ([attribute="value"]) selector。
• change()。
• next()。
• on()。
• toggle()。