Question

我已经实施了一份调查问卷，当点击“下一步”按钮时，该调查问卷会浏览不同的部分。这些值是从JSON动态提取并显示的。

我的网站上有面包屑（用HTML制作），虽然可以随机点击，但不使用“下一步”按钮。

作为JSON部分[0]，部分[1]等..

我添加了

     nav:function(){    
            this.sectionPointer=3;
                }

并以HTML格式。这在刷新时直接加载第三部分而没有单击事件。

请帮忙

这是我的代码..

     var xComponent = {
        sectionPointer:0,
        initControls:function(){
        $("#nextSecBtn").mouseup(function(){
                xComponent.sectionPointer++;
                xComponent.getX();
            });},


     getX:function(){
     $.getJSON("ajax/X.json",function(data){
    xComponent.createDOM(data);
     });
     },


     CreateDOM:function(json){      
     var currentSectionData = json.sections[this.sectionPointer];

     // value pulled from JSON to display in HTML format
     },

 JSON code:
         "sections": [
          {
           "slabel": "How",
           "questions": [
              {
              "seqNum": "1",
               "qtext": "What level ?",
              "fieldtype": "slider1",
              "mcoptions": [1,2,3]
               },
             {question2,3..}]
             },
             {section 2,3...}
            ///goes section 2,3,etc.. which holds set of questions &fields.

HTML breadcrumb：

        <ul class="breadcrumb">            
        <li><a href="" id="sec1"> How you Develop</a></li>
        <li><a href="" id="sec2"> How you Test</span></a></li></ul>

提前非常感谢你......

Answer 1

这样的事情怎么样？请注意，您希望将mockJSON替换为$.getJSON来电中返回的实际json。但是，如果您完全按原样使用此代码，则使用模拟数据，您将看到单击痕迹导航链接将使用您的xComponent对象来解析json的截面和问题值并将其渲染到这页纸。

此外，我将“下一步”按钮放回原位，点击它也将进入下一部分。页面加载时，它将默认为第一部分。最后我添加了css并输入了一些代码来调整活动部分链接上的类集。

这是你的想法吗？我相信我已经解决了您最初问题中的所有项目以及您添加的后续请求。这应该足以回答您的问题，如果您以后遇到更多问题，也许您应该在将这些更改纳入您的工作后开始一个新问题。

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    var mockJSON = {
      "sections": [
        {
         "slabel": "Section 1",
         "questions": [
            {
              "seqNum": "1",
              "qtext": "Section 1 quesiton 1 is... ?",
              "fieldtype": "slider1",
              "mcoptions": [1,2,3]
            },
            {
              "seqNum": "2",
              "qtext": "Section 1 question 2 is...?",
              "fieldtype": "slider1",
              "mcoptions": [1,2,3]
            }
          ]
        },
        {
         "slabel": "Section 2",
         "questions": [
            {
              "seqNum": "1",
              "qtext": "Section 2 question 1 is... ?",
              "fieldtype": "slider1",
              "mcoptions": [1,2,3]
            },
            {
              "seqNum": "2",
              "qtext": "Section 2 questoin 2 is...?",
              "fieldtype": "slider1",
              "mcoptions": [1,2,3]
            }
          ]
        }]
      };

      var xComponent = {
        sectionPointer:0,
        initControls:function(){
          var _self = this;
          $("#nextSecBtn").click(function(){
                _self.sectionPointer+=1;
                xComponent.getX(_self.sectionPointer);
            });
            //doing this on init in order to show the first section by default initially
            this.getX(this.sectionPointer);
        },
        getX:function(index){
          //commenting this out in place of using mocked up data. you would
          //want to uncomment this to get the json from ajax/X.json
          // $.getJSON("ajax/X.json",function(data){
          //   this.createDOM(data, index);
          // });
          this.createDOM(mockJSON, index);

          //remove active class from all links
          $(".breadcrumb li a").removeClass("active");
          //add active class to the clicked link
          $("#sec" + (this.sectionPointer+1)).addClass("active");
        },
        createDOM:function(json, index){
          console.log("getX:createDOM json",json);
          console.log("getX:createDOM index", index);
          //if the index exceeds the length of the json sections then reset to 0 to start over
          if (index>=json.sections.length){
            index=0;
          }
          this.sectionPointer = index;
          var currentSectionData = json.sections[index];
          console.log("createDOM:currentSectionData", currentSectionData);
          // value pulled from JSON to display in HTML format
          var sectionHTML = "<p>" + currentSectionData.slabel + "</p><p>" + currentSectionData.questions[0].qtext + "</p>";
          $("#sectionContents").css("border","solid 1px").html(sectionHTML);
       }
     };

     $( document ).ready(function() {
        xComponent.initControls();

        $(".breadcrumb li a").each( function( index ) {
          $(this).click( function(e) {
            e.preventDefault();
            xComponent.getX(index);
          });
        });
    });
  </script>
  <style>
    .breadcrumb {
      background-color: white;
      color: black;
      font-weight: normal;
    }
    .active {
      background: black;
      color: white;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <ul class="breadcrumb">
    <li><a href="#" id="sec1"> How you Develop</a></li>
    <li><a href="#" id="sec2"> How you Test</span></a></li>
  </ul>

  <div id="sectionContents"></div>

  <div style="padding-top:3em;"><button id="nextSecBtn" type="button">Next</button></div>
</body>
</html>

如何使用带有面包屑的Jquery显示JSON值的不同部分？

1 个答案: