填写前一个跨度的输入时显示下一个跨度

Question

我在每个跨度中有 2 个输入字段。 当行的第一个跨度填充了某个日期时，下一个跨度应该是可见的。

<span name="datalist_2field" class="display_inline xyz">
    <input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
    <input type="text" class="datalist_2row_right" name="inputfield_evmpd" value=""></input>
</span>
<?PHP
for ($i=1; $i<=10; $i++)
{
    ?>
    <span name="datalist_2field" class="display_none xyz">
        <input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
        <input type="text" class="datalist_2row_right" name="inputfield_evmpd" value=""></input>
    </span>
    <?PHP
}
?>

jQuery：

$('input[name="inputfield_smpc"]').keyup(function(){
     $(span.xyz).next().removeClass('display_none');
     $(span.xyz).next().addClass("display_inline");
});

不幸的是，它不起作用。 怎么了？ 谢谢！

Answer 1

我建议使用 change() 事件而不是 keyup()。 不应该使用 keyup() 的原因是如果用户使用自动填充输入一个值，它不会触发 keyup()。 但是，自动填充确实会触发 change() 事件，并且您的验证脚本将运行，并且输入将被验证。

至于为什么它不起作用，你有

.removeClass('display_none')

但是您尝试选择的项目没有名为“display_none”的类名

如果您尝试在不使用其他类的情况下更改 css，您可以使用类似这样的东西

.css("display", "block");

Answer 2

display_none需要根据您的要求添加到第二个输入而不是跨度。

您的第一个跨度的代码示例：HTML

<span name="datalist_2field" class="display_inline xyz">
<input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
<input type="text" class="datalist_2row_right display_none" name="inputfield_evmpd" value=""></input>
</span>

jQuery

 $('input[name="inputfield_smpc"]').keyup(function(){
   $(this).next().removeClass('display_none');
   $(this).next().addClass("display_inline");
});