0

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

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，如果有任何方法可以使第二种形式对外观产生影响，那就太棒了。

-亚当

4

1 回答 1

0

display 属性接受多个值，但 true 和 false 不在其中。要获取完整列表，请访问MDN或w3schools或MSDN。但我现在可以告诉你，你最可能想要的值是“none”和“block”，如下所示：

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 != '' 添加到您的代码中。此外，最好使用 !== 而不是 !=。

:)

于 2013-09-06T02:24:23.163 回答