Question

有问题的HTML结构如下所示：

<div class="form-group form-text">
  <div class="input-group">
    <span class="input-group-btn">
      <div id="47" class="btn btn-danger input-xs remove-farming-action">
        <span class="glyphicon glyphicon-remove"></span>
      </div>
    </span>
    <input id="action_CropCount" 
           class="form-control input-xs numeric-text-box crop-counter-textbox" 
           type="number" 
           value="8" 
           name="action.CropCount" 
           min="1" 
           max="999">
  </div>
  Aubergine Violetta lunga 3
  <span class="crop-count-crop-word">crop(s)</span>
  <br>
</div>
(... And so on for different items.)

所以这是一个表单组列表，它们都有一个可以选择值的输入字段和一个带有文本的span-field。我想要做的是当“crop-counter-textbox”类的输入字段为1（从复数到非复数）时，更改“crop-count-crop-word”文本。挑战在于输入框旁边的span元素必须更改，而不是所有其他元素。

我选择的解决方案（如果有更好的解决方案让我知道）是使用JavaScript来选择输入字段并将更改事件绑定到它，如下所示：

makeCropPluralWhenCropCountIsBiggerThan1: function() {
    // Every crop count input field needs a span label with crop or crops depending on the count.
    $('.crop-count-crop-word').prev('input').change(function() {
        $(this).next('span').text( $(this).val() == 1 ? 'crop' : 'crops' );
    });
    // Ensure text is correct on load by triggering change event.
    $('.crop-count-crop-word').prev('input').trigger('change');
}

不幸的是，这不起作用。我无法从span元素中选择先前的输入字段。没有选择任何项目。

有人可以告诉我们如何选择“crop-count-crop-word”范围，该范围是“crop-counter-textbox”类的输入的下一个？

/编辑这里是一个小提琴：https://jsfiddle.net/4ftx1b2b/1/

Answer 1

您可以直接选择它：

$(".crop-counter-textbox").change(function(e){});

或来自您的范围

$('span.crop-count-crop-word').prev(".input-group").find("input.crop-counter-textbox").change(function(e){});

.prev selets在同一级别，但在同一级别有一个div.input-group而不是你的input.crop-counter-textbox，这就是你的选择器找不到它的原因。

Answer 2

您正在尝试选择之前的input元素，但实际上有一个div元素，其中包含input。因此，您需要将$('.crop-count-crop-word').prev('input')更改为$('.crop-count-crop-word').prev('.input-group').find('input')。

编辑了您的代码（fiddle）：

function makeCropPluralWhenCropCountIsBiggerThan1() {
// Every crop count input field needs a span label with crop or crops depending on the count.
$('.form-group').each(function() {
    var $input = $(this).find('input:first');
    var $span = $(this).find('.crop-count-crop-word:first');
    $input.change(function() {
        $span.text( $(this).val() == 1 ? 'crop' : 'crops' );
        $input.trigger('change');
    });        
});

}

如何从span中选择子div中的前一个输入元素并绑定更改事件？

2 个答案: