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

您可以使用next()定位输入后的下一个元素

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

FIDDLE

Answer 2

我个人建议修改您的初始选择器：

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

JS Fiddle demo

或者，使用特定元素＆＃39; id作为标识符（但仍稍微缩短选择链）：

$('#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()。

Answer 3

它是已更改的input元素的下一个兄弟，因此请使用.next()并更改显示使用.toggle()而不是显示/隐藏

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

这个+类选择器？

3 个答案: