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

单击其他页面元素将修改pendingdone值。

当这些值相同时,是否可以跟踪这些更改并将类应用于整个<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>

最佳答案

findtext函数与这些选择器'[name="pending"]' '[name="done"]'一起使用。

要收听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()

07-21 15:50
查看更多