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，或者将id指定为id或使用class selector。

更改

 $('#home')

到的

$('.home')

你的代码是

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

Answer 2

你正在调用home的span id，它实际上就是这个类。

更改为$('.home')

Answer 3

足够简单：

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

jQuery .show（）无法处理<span>标记</span>

3 个答案: