javascript - 当通过直接输入或按钮更改输入值时突出显示一行

Question

我的网站上有一个表行部分，其中包括一个减号按钮、一个输入字段和一个添加按钮。我试图做到这一点，以便每当输入更改时，行的背景就会突出显示，无论是通过直接键入内容还是通过按钮增加/减少。

第一个问题是，我的代码无法运行。页面加载并且按钮正确增加/减少输入框中的数字，但没有任何突出显示。所以我需要让它工作，但有一个问题:我希望当“0”回到输入框中时重置颜色。因此任何大于零的数字都会保留突出显示，但“0”会将其恢复为不突出显示。

这是到目前为止的代码:

$("tr > td > input").focus(function(e) {
  $(this).parent().parent().addClass('highlight');
}).blur(function(e) {
  $(this).parent().parent().removeClass('highlight');
});

$('.incrementer-class-name').each(function() {
var $this = $(this);
var $input = $this.find('.md-input');
$this.on('click', '.add-button', function() {
var val = parseInt($input.val());
$input.val(++val);
}).on('click', '.remove-button', function() {
var val = parseInt($input.val());
$input.val(--val);
});
});

tr.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="incrementer-class-name">
        <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
        <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0'
        />
        <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
      </div>
    </td>
  </tr>
</table>

Answer 1

由于您使用 jQuery 使用 closest函数将帮助您突出显示该行。 jQuery 还有 addClass和 removeClass也可以帮助您解决这个问题。

首先，您需要一个事件来监听输入中的更改(我使用了 keyup 事件)，然后检查所需条件的值并更新最接近的 tr 的类。

这个示例足够动态，您可以添加多行并使其仍然有效

$('.incrementer-class-name').each(function() {
  var $this = $(this);
  var $input = $this.find('.md-input');
  $this.on('click', '.add-button', function() {
    var val = parseInt($input.val());
    $input.val(++val);
    if (val === 0) {
      $(this).closest("tr").removeClass("highlight");
    } else {
      $(this).closest("tr").addClass("highlight");
    }
  }).on('click', '.remove-button', function() {
    var val = parseInt($input.val());
    $input.val(--val);
    if (val === 0) {
      $(this).closest("tr").removeClass("highlight");
    } else {
      $(this).closest("tr").addClass("highlight");
    }
  });
});

$(".highlightInput").on("keyup", function(e) {
  if ($(this).val() === "0") {
    $(this).closest("tr").removeClass("highlight");
  } else {
    $(this).closest("tr").addClass("highlight");
  }
});

.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="incrementer-class-name">
        <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
        <input type="text" class="md-input highlightInput" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0'
        />
        <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
      </div>
    </td>
  </tr>
</table>