填寫前一個跨度的輸入時顯示下一個跨度

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");
});