1

テキスト ボックスが 3 つあるフォームがあります。どちらから先に入るかに関係なく、それぞれに重要なイベントを設定したいと考えています。以下は私のコードです：

function showQuoteBox() {
var overlay = '<div id="overlay"></div>';
var quoteBox = '<form id="quoteForm" action="#"><h1>Get a quote from <INSTALLERS NAME></h1><fieldset id="user-details"><label for="inName">Name:</label><input type="text" id="inName" name="name" value="" /><label for="email">Email:</label><input type="email" id="inEmail" name="email" value=""  /><label for="phone">Phone:</label><input type="text" id="inPhone" name"phone" value=""  /><input type="submit" value="Get quote!" name="submit" class="submit" /></fieldset><div id="sent-details"><span id="nameText"><span id="emailText"><span id="phoneText"></span></div></form>'
jQuery(overlay).appendTo('body');
jQuery(quoteBox).appendTo('body');
jQuery(document).ready(function() {
    jQuery('#inName').keyup(function(){
        jQuery('#nameText').html(jQuery(this).val());
    });
    jQuery('#inEmail').keyup(function(){
        jQuery('#emailText').html(jQuery(this).val());
    });
    jQuery('#inPhone').keyup(function(){
        jQuery('#phoneText').html(jQuery(this).val());
    });
});
}

window.onkeyup = function (event) {
   if (event.keyCode == 27) {
      jQuery('#overlay').remove();
      jQuery('#quoteForm').remove();
   }
}

上記は、ボタンがクリックされたときに呼び出される関数全体です。3 つの入力がある quoteBox を示しています。各入力ボックスにテキストを入力できますが、最初に入力されたもののスパン領域のみが更新されます。他のテキスト ボックスに値がある場合、他のすべては更新されません。

最初に電子メールを入力することを選択すると、スパンに表示されますが、他のテキスト ボックスに値を入力すると、リッスンしません。

4

3 に答える 3

1

あなたが説明する動作（1つのキーアップのみが機能しているように見える）は、3つのスパンを互いに埋め込んだという事実が原因である可能性があります。

<div id="sent-details">
    <span id="nameText">
        <span id="emailText">
            <span id="phoneText"></span>
</div>

それだけでなく、私は彼らが閉鎖されているのを見ていません。SPANタグは自己閉鎖的ではなく、各ブラウザはこれを自己修正または異なる方法で解釈しようとします。一部のブラウザは、それらを閉じようとする場合があります。

したがって、最初のキー押下イベントは、他の2つのSPAN要素を上書きするか、HTMLが無効であるためにJavaScriptが要素を見つけることができません。

HTMLの正しい構文は次のとおりです。

var quoteBox = '<form id="quoteForm" action="#">' +
  '<h1>Get a quote from <INSTALLERS NAME></h1>'+
  '<fieldset id="user-details">'+
      '<label for="inName">Name:</label>'+
      '<input type="text" id="inName" name="name" value="" />'+
      '<label for="email">Email:</label>'+
      '<input type="email" id="inEmail" name="email" value=""  />'+
      '<label for="phone">Phone:</label>'+
      '<input type="text" id="inPhone" name"phone" value=""  />'+
      '<input type="submit" value="Get quote!" name="submit" class="submit" />'+
  '</fieldset>'+
  '<div id="sent-details">'+
      '<span id="nameText"></span>'+  // closed tags here
      '<span id="emailText"></span>'+ // closed tags here
      '<span id="phoneText"></span>'+ // closed tags here
  '</div></form>';

より持続可能で保守可能なソリューション：

余談ですが、JavaScript変数にHTMLの長い文字列を格納することは、マークアップを操作する非常に持続不可能な方法です。これは、読みにくくなり、まさにこの種の間違いにつながるためです。代わりに、この問題に取り組む場合は、代わりにこのHTMLをページに配置しますが、を使用して非表示にしdisplay:noneます。次に、関数showQuoteBoxで、CSSクラスまたはIDセレクターを使用して、そのコードブロックを再表示します。

HTMLはそれが属するHTMLドキュメントに含まれるため、保守がはるかに容易になるだけでなく、JavaScriptをリバースエンジニアリングしようとしないWebデザイナーと友達になることもできます。

<div id="overlay" style="display:none">
    <form id="quoteForm" action="#">
        <h1>Get a quote from <INSTALLERS NAME></h1>
            <fieldset id="user-details">
                <label for="inName">Name:</label>
                <input type="text" id="inName" name="name" value="" />
                <label for="email">Email:</label>
                <input type="email" id="inEmail" name="email" value=""  />
                <label for="phone">Phone:</label>
                <input type="text" id="inPhone" name"phone" value=""  />
                <input type="submit" value="Get quote!" name="submit" class="submit" />
            </fieldset>
           <div id="sent-details">
               <span id="nameText"></span>
               <span id="emailText"></span>
               <span id="phoneText"></span>
          </div>
      </form>
  </div>

function showQuoteBox() {
     // var overlay = '<div id="overlay"></div>';  <-- don't do this
     // var quoteBox

     // instead, use jQuery to unhide your HTML and keep it out of the JavaScript
     $('overlay').show();  

     // the rest of your code follows
     ...
 }

最後に、キーアップイベントコードを関数内に含めているようですshowQuoteBox。readyページの読み込みが完了し、DOMの準備が整うとすぐに、jQueryオブジェクトのメソッドが起動するため、そのイベントを関数内に登録するのは少し奇妙に思えます。

この場合、jQueryを使用してすでにロードされているページにいくつかのDOM要素を追加するときに、これらのイベントを登録しています。したがって、（document）.readyは不要であるだけでなく、問題が発生する可能性があります。前のセクションの手順を実行しても問題が解決しない場合は、次のコードブロックに示すようにdocument.readyラッパーを削除することを検討してください。

// don't put document.ready around this since it's in a function you're calling to show a form
jQuery('#inName').keyup(function(){
    jQuery('#nameText').html(jQuery(this).val());
});
jQuery('#inEmail').keyup(function(){
    jQuery('#emailText').html(jQuery(this).val());
});
jQuery('#inPhone').keyup(function(){
    jQuery('#phoneText').html(jQuery(this).val());
});
于 2012-05-10T01:29:26.477 に答える
0

同じ動作を繰り返しているので、プラグインを使うべきだと思います。私はこれをミミックと呼んでいます。これはテストされていません (いじる html や jsfiddle がないため) が、うまくいくはずです。

(function($) {
    $.fn.mimic = function(selector) {
        var $elementToMimic = $(selector);

        $.each(this, setupMimicEvents);

        function setupMimicEvents() {
            var $mimicer = $(this);

            $elementToMimic.on('keyup', mimicElement);

            function mimicElement() {
                var value = $elementToMimic.val();
                $mimicer.html(value);
            }
        } 

        return this;
    }
})(jQuery)

jQuery(function() {
    jQuery('#nameText').mimic('#inName');
    jQuery('#phoneText').mimic('#inPhone');
});

さらに

jQuery を使用する場合は、本文のイベントにも使用してください。全体的に何をしようとしているのかはわかりませんが、少しずれているようです。

于 2012-05-10T01:12:29.700 に答える
0

ただ..あなたがしていることをしてください。$(document).ready でラップする限り、正常に動作するはずです。

于 2012-05-10T00:56:57.597 に答える