0

私はJavascriptを始めたばかりで、私が持っているこのクエリで誰かが私を正しい方向に向けてくれないかと思っていました。

JSON配列を作成しましたが、ボタンをクリックすると、配列からページ上のテキストを更新したいと思います。画像を更新するイベント処理関数がありますが、'nextPage'関数内でオブジェクト名（pageRef）を更新して、配列の内容からテキストを更新する方法を理解できません。これはおそらく本当に明白な質問であることを理解していますが、正しい直接のポインタは非常に高く評価されます。

    var diary_1938 = {
      
    'page_1': {
    'date_0': '1st Jan','entry_0': 'This is the first line',
    'date_1': '2nd Jan','entry_1': 'This is the second line',
    'date_2': '4th Jan','entry_2': 'This is the third line',
    'img': 'image_1.jpg'},
    'page_2':  {
    'date_0': '12th Jan','entry_0': 'This is the first line',
    'date_1': '13th Jan','entry_1': 'This is the second line',
    'date_2': '14th Jan','entry_2': 'This is the third line',
    'img': 'image_2.jpg'},
    };
    
    var counter = 1;
    var pageRef = "page_"+counter;
    
    function nextPage() {
      counter++
      document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
    }
    
    function prevPage() {
      counter--
      document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
    }
    
    </script>
    </head>
    
    <body>
    
    <button type = "submit" name = "submit_prev" onClick = "prevPage()"> << </button>
    <button type = "submit" name = "submit_next" onClick = "nextPage()"> >> </button>
    <br/>
    
        <script> document.write(diary_1938[pageRef].date_0 + "<br/>"); </script>
        <script> document.write(diary_1938[pageRef].entry_0 + "<br/><br/>"); </script>
        <script> document.write(diary_1938[pageRef].date_1 + "<br/>"); </script>
        <script> document.write(diary_1938[pageRef].entry_1 + "<br/><br/>"); </script>
        <script> document.write(diary_1938[pageRef].date_2 + "<br/>"); </script>
        <script> document.write(diary_1938[pageRef].entry_2 + "<br/><br/>"); </script>    
    
    <script>document.write("<img id = 'DiaryImage' src = 'image_1.jpg' width='370' height='790' name ='Dunford'/>"); </script>
    
    </body>
4

2 に答える 2

0

nextPage（）でコーディングすると、ボタンがクリックされるたびに呼び出されます。ただし、次のようなコード：* var counter = 1; var pageRef = "page _" + counter; document.write（diary_1938 [pageRef] .date_0 + "
"）;* 初期化時に1回だけ実行されます。したがって、次のようにコードを記述したほうがよいでしょう。

function nextPage() {
  counter++;
  pageRef = "page_"+counter;
   /*clear written content before*/
  document.write(diary_1938[pageRef].date_0 + "<br/>");
   /*other document.write,*/
  document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
}
于 2012-12-01T14:13:22.080 に答える
0

document.writeページがブラウザーに読み込まれるときに一度だけ読み取られるため、動的コンテンツの更新に使用するのは実際にはベスト プラクティスではありません。

あなたができることは、次のように動的コンテンツを div でラップすることです。

    <div id="content"></div>

次に、JSON データからこの div を作成する関数を作成します (これはもっと洗練されたものになる可能性がありますが、簡単にするために始めたばかりです)。

function populatePageFromJson(JSONobject){
var divElement=document.getElementById("content");
divElement.innerHTML=JSONobject[pageRef].date_0+"<br/>"+ 
                     JSONobject[pageRef].entry_0+"<br/><br/>"+
                     JSONobject[pageRef].date_1+"<br/>"+ 
                     JSONobject[pageRef].entry_1+"<br/><br/>"+
                     JSONobject[pageRef].date_2+"<br/>"+ 
                     JSONobject[pageRef].entry_2+"<br/><br/>"
}

そして、ページが読み込まれると、この関数が読み込まれます:

window.onload= function() { 
        populatePageFromJson(diary_1938);
}

も変更prevPage()しnextPage() 、同様に（あなたの場合、pageRefを更新するのを忘れたことに注意してください）：

  function prevPage() {
      counter--
      pageRef = "page_"+counter;
      document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
      populatePageFromJson(diary_1938);
    }

すべてを結び付けるjsFiddlerの例を次に示します。

繰り返しますが、これは最もエレガントな方法とは言えませんが、Javascript についての洞察が得られることを願っています。

基本的な Javascript の理解に慣れたら、jQueryに慣れることをお勧めします。そのようなタスクをはるかに簡単にします。幸運を！

于 2012-12-01T14:50:23.653 に答える