jQuery .show() 不适用于 <span> 标签

Question

这似乎很简单。我有一个文本框，我希望根据其中是否有内容来显示链接。在我document.ready的代码中，我将代码设置为

    $(document).ready(function () {
        $('#searchValue').change(function () {
            if ($('#searchValue').val().length > 0) {
                $('#home').show();
            } else {
                $('#home').hide();
            }
    });

这是我的 ASP MVC 视图中的部分，其中包含我所指的链接。我希望每次加载页面时都显示跨度之外的所有内容。中的任何内容span，仅当文本框中有信息时。

    @Html.ActionLink("Create New", "Create") |
    @Html.ActionLink("Export to Spreadsheet", "ExportToCsv") 
    <span class="home" style="display:none;">
    | @Html.ActionLink("Back to Index", "Index")       
    </span>

我已经尝试过使用和不使用该style="display:none;"属性，但我无法触发.show()or .hide()。我已经逐步完成了代码，并且可以看到 中的条件doucment.ready正在工作，并且正在达到代码的那部分。

Answer 1

您需要类选择器而不是id selector，您将 home 作为 span 类，而不是您将 home 分配给 id 或使用的 id class selector。

改变

 $('#home')

到

$('.home')

你的代码将是

$(document).ready(function () {
    $('#searchValue').change(function () {
        if ($('#searchValue').val().length > 0) {
            $('.home').show();
        } else {
            $('.home').hide();
        }
});