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 + "
");* 在初始化时只执行一次。所以你最好把你的代码写成：

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 回答