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()或.hide()火。我已经完成了代码，可以看到doucment.ready中的条件正在工作，但是，正在达到代码的那一部分。

Answer 1

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

 $('#home')

$('.home')

你的代码应该是

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

Answer 2

调用span id of home它实际上是一个类

更改为$('.home')

Answer 3

很简单:

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