Question

我正在尝试将div替换为另一个div以创建多页面应用。我有一个id = start的div，它保存着我的表单。单击按钮时，表单需要由id = list的div替换。表单正在重新加载，我在控制台中也没有收到任何错误。

HTML：

<div data-role="page" id="start">
  <div data-role = "main">
    <br><br>
    <div align="right">
      <img src="./img/help-icon.png" onClick="alert('Please get your security credentials')"/>
    </div>

    <div align = "center">
      <img src="./img/Logo login screen.png" height="200" width="170"/>
    </div>

    <br><br>

    <form id="loginForm" align = "center" method="get">
      <div id="user" align = "center">
        <input type="text" id="accessKey" Placeholder="Access Key (20 characters)" size="30" maxlength="128" tabindex="1" autocorrect="off" autocapitalize="off" data-validation="[NOTEMPTY]"/>
      </div>
      <br><br>
      <div id = "pass" align = "center">
        <input type="password" id = "secretKey" Placeholder = "Secret Key (40 characters)" size="30" maxlength="1024" tabindex="2" data-validation="[NOTEMPTY]"/>
      </div>
      <br><br>
      <center><button type = "submit" id="submitButton" class="ui-btn">Login</button></center>
    </form>
  </div>
</div>

<div data-role="page" id="list">
  <div data-role="main">
    <div id="bucket_list"></div>
    <div id = "status"></div>
  </div>
</div>

JS片段：

AWS.config.update({accessKeyId: accKey, secretAccessKey: secKey});
var s3Client = new AWS.S3();
s3Client.listBuckets(function(err, data){
    $('#start').replaceWith($('#list'));
    if(err) alert("Error :: ", err);
    else{
        var listElement = document.createElement("ul");
        document.getElementById('bucket_list').appendChild(listElement);
        for(var index in data.Buckets){
            var bucket = data.Buckets[index];
            var listContent = document.createElement("li");
            listContent.innerHTML = "<p><a href=# onclick =" + bucketContents(bucket) + "; >" +  bucket.Name + "</a></p>";
            listElement.appendChild(listContent);
         }
       }
     });
     function bucketContents(bucket){
     s3Client.listObjects(params = {Bucket: bucket.Name}, function(err, data){
      if (err) {
           document.getElementById('status').innerHTML = 'Could not load objects from S3';
      } else {
        document.getElementById('status').innerHTML = 'Loaded ' + data.Contents.length + ' items from S3';
         var listStart = document.createElement("ul");
         document.getElementById('status').appendChild(listStart);
         for(var i=0; i<data.Contents.length;i++){
            var listItems = document.createElement("li");
            listItems.innerHTML = data.Contents[i].Key;
            listStart.appendChild(listItems);
          }
      }
    });
  }

谁能告诉我哪里出错了？

Answer 1

确保正确添加jquery库。请注意，在添加jquery库之后应该编写代码。

<强> ALITER

我从您的代码中获得的是，您希望#start不可见，然后让#list可见。

您可以将display : none添加到#list的CSS中，然后在您想要执行该操作的事件中，您可以执行以下操作：

$('#start').hide();
$('#list').show();

Answer 2

感谢所有帮助。我得到了答案。我只需要将replaceWith放在适当的位置。工作代码是：

AWS.config.update({accessKeyId: accKey, secretAccessKey: secKey});

                var s3Client = new AWS.S3();

                s3Client.listBuckets(function(err, data){
                    if(err) alert("Error :: ", err);
                    else{
                        var listElement = document.createElement("ul");
                        document.getElementById('bucket_list').appendChild(listElement);
                        for(var index in data.Buckets){
                            var bucket = data.Buckets[index];
                            var listContent = document.createElement("li");
                            //listContent.innerHTML = "<p><a href=# onclick =" + bucketContents(bucket) + "; >" +  bucket.Name + "</a></p>";
                            listContent.innerHTML = "<p><a href='#'>" +  bucket.Name + "</a></p>";
                            listElement.appendChild(listContent);
                        }
                    }
                });

                $("#start").replaceWith($("#list").html());

单击按钮后用另一个div替换div时，.replaceWith（）不起作用

2 个答案: