javascript - jQuery - 检测两个 html `` 何时包含相同的值

Question

我的 Web 应用程序中有以下 html 结构。这是一组<div>包含有关项目的信息。具体有两个<span>标签为 pending和done数量(整数值)。

点击其他页面元素会修改pending和done值。

是否可以跟踪这些更改并将一个类应用于整个 <div>当这些值相同时？

所以整个<div id="{{ item.id }}">当待定和完成匹配时将有绿色背景，当值不匹配时将没有彩色背景。实际要做的操作并不相关，我想念的是理解 jQuery 中监视两个 html 字段中的值的正确方法。

<div id="{{ item.id }}" href="#" state="{{ item.state }}" class="item">
    <div class="row">
        <div class="col-xs-4">
            <span name="pending">{{ item.pending }}</span>
        </div>
        <div class="col-xs-4">
            <span name="done">{{ item.done }}</span>
        </div>
    </div>
</div>

Answer 1

将 find 和 text 函数与这些选择器一起使用 '[name="pending"]' '[name="完成”]'。

要监听 javascript 修改 (jQuery)，另一种方法是覆盖 .val 函数。

var originalValFn = jQuery.fn.val;
jQuery.fn.val = function(value) {
  originalValFn.apply(this, arguments);
  if (value !== undefined) {
    $('#done').trigger('input');
    $('#pending').trigger('input');
  }
};

看看这个代码片段。

当用户更改值时，必须调用函数updateSection。

var target = $('#myId');

var originalValFn = jQuery.fn.val;
jQuery.fn.val = function(value) {
  originalValFn.apply(this, arguments);
  if (value !== undefined) {
    $('#done').trigger('input');
    $('#pending').trigger('input');
  }
};

var updateSection = function() {
  var pending = target.find('[name="pending"]').text();
  var done = target.find('[name="done"]').text();

  if (pending === done) {
    target.addClass('green-class');
    target.removeClass('red-class');
  } else {
    target.addClass('red-class');
    target.removeClass('green-class');
  }
}

$('#pending').on('input', function(e) {
  target.find('[name="pending"]').text(e.target.value);
  updateSection();
});

$('#done').on('input', function(e) {
  target.find('[name="done"]').text(e.target.value);
  updateSection();
});

$('#done').val('3');
$('#pending').val('4');


//updateSection();

.green-class {
  background-color: green;
}

.red-class {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myId" href="#" state="{{ item.state }}" class="item">
  <div class="row">
    <div class="col-xs-4">
      <span name="pending">222</span>
    </div>
    <div class="col-xs-4">
      <span name="done">222</span>
    </div>
  </div>
</div>
<hr>
<p>Enter values to test:</p>
<input id='pending' placeholder='pending'>
<input id='done' placeholder='done'>

资源

• .find()
• .text()
• .on()