在填写上一个span的输入时显示下一个span

Question

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

<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()。但是，autofill会触发change()事件，并且您的验证脚本将运行，并且输入将被验证。

至于为什么不工作，你有

.removeClass('display_none')

但是您要选择的项目没有名为'display_none'的类名

如果你想在不使用其他类的情况下改变CSS，你可以使用如下命令

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

Answer 2

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

第一个span的代码示例: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");
});