javascript - 之前的web form录入数据后，如何让web form出现？

Question

我希望在第一个网络表单输入内容后显示第二个网络表单。我目前正在使用 sinatra 设置为 slim 作为模板引擎和纯 javascript。

input#topic value="Enter topic" onfocus="this.value = this.value=='Enter topic'?'':this.value;" onblur="this.value = this.value==''?'Enter topic':this.value;"

input#subtopic value="Enter subtopic" onfocus="this.value = this.value=='Enter subtopic?'':this.value;" onblur="this.value = this.value==''?'Enter subtopic':this.value;"

上面是我的两个表单，onfocus和onblur是让表单的值消失，点击再出现。

我的javascript如下。

function checkField(field) {
    if(field.value != null) {
        document.getElementById('subtopic_form').style.display = 'true';
    } else {
        document.getElementById('subtopic_form').style.display = 'false';
    }
}

这不起作用，部分问题是当我添加到输入标签时

onchange="checkField(this)"

然后我在我的 javascript 文件中收到一个函数未使用的消息，即使我在我的 home.slim 文件中指定了

script src="/js/application.js"

非常感谢任何帮助使它在我需要的时候工作。 我愿意为此使用 jquery，如果有任何方法可以使第二种形式对外观产生影响，那就太棒了。

-亚当

Answer 1

display 属性接受多个值，但 true 和 false 不在其中。要获得完整列表，请访问 MDN或 w3schools或 MSDN .但我现在可以告诉您，您最可能想要的值是“无”和“阻止”，如:

function checkField(field) {
    if(field.value != null && field.value != '') {
        document.getElementById('subtopic_form').style.display = 'block';
    } else {
        document.getElementById('subtopic_form').style.display = 'none';
    }
}

不过，如果使用 jQuery，这段代码可能会更简洁一些!

function checkField(field) {
    if (field.value != null && field.value != '') {
        $("#subtopic_form").show();
    } else {
        $("#subtopic_form").hide();
    }
}

甚至

$("#topic").change(function(){
    if ($(this).val()) {
        $("#subtopic_form").show();
    } else {
        $("#subtopic_form").hide();
    }
});

如果您想要效果，请考虑 jQuery 的 .fadeOut()或 .slideUp()代替.hide()

请注意，我在您的代码中添加了 field.value != ''。另外，最好使用 !== 而不是 !=。

:)