我的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>
最佳答案
将find
和text
函数与这些选择器'[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()