javascript - jquery比较同一行的数据，如果正确则显示第三行的内容

Question

我需要将第一个 td 与第二个 td 的 input 进行比较，当它们相同时，第三个 td 不得不说对比是对的。它需要是动态的，以便它适用于每个表格行。

HTML:

<table>
    <tr>
        <td>1234567890123</td> <!-- EAN Number -->
        <td><input type="text"></td> <!-- Barcode scanner gives input -->
        <td><span>Correct!</span></td>
    </tr>
    <tr>
        <td>2345678901234</td>
        <td><input type="text"></td>
        <td><span>Correct!</span></td>
    </tr>
</table>

CSS:

td > span {
    display:none;
}

jQuery(不知道该做什么):

$(document).ready(function(){
    $("input").keyup(function(){
        if($('td:first-of-type').text === $('td:nth-of-type(2)').val()){
            $('span').css('cssText','display:block;');
        }
    });
});

Answer 1

您希望它基于 input 在 DOM 中的位置。当前，您每次都选择整个页面中的第一个和第二个 td。您还需要第二个 td 中的 input 的值，而不是 td 但因为您使用的是 keyup函数的上下文 this 已经是 input 了。此外，您没有正确使用 css 函数。

例子:

$(document).ready( function() {
    $("input").keyup( function() {
        // Cache current input user was typing in as jQuery object
        var $input = $(this);

        // Find first td in tr of the input user was typing
        var $firstTd = $input.parent().prev();

        // Find last td in tr of the input user was typing
        var $lastTd = $input.parent().next();

        // Compare text value of first td with value user typed in input
        if ($firstTd.text() === $input.val()) {
            // If equal find span in last td and set display block
            $lastTd.find('span').css('display', 'block');
        }
        else {
            // If not equal find span in last td and set display none
            $lastTd.find('span').css('display', 'none');
        }
    });
});

fiddle :https://jsfiddle.net/d5ab79vc/1/