<td>
somename
</td>
<td class="hoverable value" >
somevalue
</td>
<td class="changed">
</td>
<td class="original value">
<input type="hidden" value="somevalue" />
</td>
而我正在尝试做的是,我将鼠标悬停在可翻转的td上,将其变成文本框。一旦我徘徊,我想检查隐藏字段的原始值,如果2彼此不同,则将图像置于更改状态。我已经有了这个:
$(document).ready( function() {
var newHTML = '';
$('table td.hoverable').hover(
function () {
var oldHTML = $(this).html().trim();
$(this).html('<input type=\'text\' value=\'' + oldHTML + '\' size=\'' + ((oldHTML).length + 2) +'\' />');
},
function() {
newHTML = $('input', this).val();
var oldHTML = $(this).next('td.original').children('hidden').val();
if(newHTML != oldHTML) {
$(this).next('td.changed').html('Changed');
}
$(this).html(newHTML);
})
});
但它不起作用。显然失败的是抓住隐藏领域的价值,我尝试用几种不同的方式选择它,但却无法实现。 感谢任何想法或提示;)
答案 0 :(得分:5)
您需要使用 .nextAll()
var oldHTML = $(this).nextAll('td.original').find('input:hidden').val();
为什么呢?因为.next()正在使用下一个元素并查看它是否与选择器匹配。如果您使用.nextAll(),则会获得与选择器匹配的下一个元素。
答案 1 :(得分:1)
尝试
$(this).next('td.original').find('input:hidden').val();
答案 2 :(得分:0)
var oldHTML = $(this).next('td.original').children(':hidden').val();
答案 3 :(得分:0)
替换
var oldHTML = $(this).next('td.original').children('hidden').val();
使用
var oldHTML = $(this).next('td.original').find('input:hidden').val();