0

最初の Web フォームに何かが入力された後に、2 番目の Web フォームを表示させたいと考えています。私は現在、テンプレートエンジンとしてスリムで設定されたsinatraと、純粋な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;"

上記は私の 2 つのフォームです。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)"

次に、home.slimファイルで指定したにもかかわらず、javascriptファイル内に関数未使用のメッセージが表示されます

script src="/js/application.js"

必要に応じてこれを機能させるための助けをいただければ幸いです。私はこれにjqueryを使用することにオープンです.2番目のフォームを外観に影響させる方法があれば、それは素晴らしいことです.

-アダム

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();
    }
});

効果が必要な場合は、.hide() の代わりに jQuery の.fadeOut()または.slideUp()を検討してください。

コードに field.value != '' を追加したことに注意してください。また、!= の代わりに !== を使用することをお勧めします。

:)

于 2013-09-06T02:24:23.163 に答える