从URL获取JSON，然后使用Javascript

时间：2018-04-04 19:56:09

标签： javascript jquery json

我创建了一个手风琴，我希望使用此链接中的JSON填充：http://design.propcom.co.uk/buildtest/accordion-data.json

这是我的HTML：

    <div class="accordion js-accordion">
        <div class="accordion__item js-accordion-item active">
            <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body" >
                <div class="accordion-body__contents" ></div>
            </div><!-- end of accordion body -->
        </div><!-- end of accordion item -->

    <div class="accordion__item js-accordion-item ">
        <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents"></div>
            </div>
        </div>

    <div class="accordion__item js-accordion-item">
        <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents"></div>
            </div>
        </div>
    </div><!-- end of accordion -->

我正在尝试使用来自JSON文件的“heading”数据填充 accordion-header js-accordion-header div，并使用“内容”填充 accordion-body__contents “数据。

就我在Javascript部分中所做的那样：

$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',   
type: 'GET',
dataType: 'JSON',
success: function (data) {
   $.each(data.blocks, function(index, element) {
   $(".accordion-header").append("<div>" + element.heading + "</div>");
   $(".accordion-body__contents").append("<div>" + element.content + "</div>");
    });
}

}）;

任何帮助都会非常感激，因为我觉得我已经在目前的努力中遇到了障碍。

1 个答案:

答案 0 :(得分：0)

这里有一些问题：

  1. 处理AJAX结果时我们有点不对劲
    • 使用data.blocks属性，while循环使用element变量。
  2. @Danny建议我们有额外的AJAX属性
    • 删除callback和data属性。
  3. 最后你的html似乎过于复杂
    • 从您的演示站点看到css后，我能够包含它并删除JQueryUI思想。现在请务必附加整个accordion__item元素。

    4. 解决这些问题应该与此类似：

    $.ajax({
  url: 'https://design.propcom.co.uk/buildtest/accordion-data.json',
  type: 'GET',
  dataType: 'JSON',
  success: function (data) {
    $.each(data.blocks, function(index, element) {
      $(".accordion")
        .append(`<div class="accordion__item js-accordion-item ">
          <div class="accordion-header js-accordion-header">${element.heading}</div> 
              <div class="accordion-body js-accordion-body">
                  <div class="accordion-body__contents">${element.content}</div>
              </div>
          </div>`);
    });
    
    var accordion = (function(){
      var $accordion = $('.js-accordion');
      var $accordion_header = $accordion.find('.js-accordion-header');
      var $accordion_item = $('.js-accordion-item');

      // default settings 
      var settings = {
        // animation speed
        speed: 400,

        // close all other accordion items if true
        oneOpen: false
      };

      return {
        // pass configurable object literal
        init: function($settings) {
          $accordion_header.on('click', function() {
            accordion.toggle($(this));
          });

          $.extend(settings, $settings); 

          // ensure only one accordion is active if oneOpen is true
          if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
            $('.js-accordion-item.active:not(:first)').removeClass('active');
          }

          // reveal the active accordion bodies
          $('.js-accordion-item.active').find('> .js-accordion-body').show();
        },
        toggle: function($this) {

          if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
            $this.closest('.js-accordion')
                   .find('> .js-accordion-item') 
                   .removeClass('active')
                   .find('.js-accordion-body')
                   .slideUp()
          }

          // show/hide the clicked accordion item
          $this.closest('.js-accordion-item').toggleClass('active');
          $this.next().stop().slideToggle(settings.speed);
        }
      }
    })();

    $(document).ready(function(){accordion.init({ speed: 300, oneOpen: true });});
  }
});
    body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}body {
  font-size: 62.5%;
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  line-height: 2;
  padding: 5em;
}

.accordion {
  font-size: 1rem;
  width: 30vw;
  margin: 0 auto;
  border-radius: 5px;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 1.5em 1.5em;
  margin-bottom:6px;
  box-shadow: 0px 4px #6F277D;
  background: #9E38B0;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  font-size: .8em;
  letter-spacing: .1em;
  transition: all .3s;
}

.accordion-header:hover {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #3f3c3c;
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: #6844B7;
  box-shadow: 0px 4px #4C3185;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: black;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 1em;
  }
  
  .accordion {
    width: 100%;
  }
}/* CSS Document */
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="accordion js-accordion">
</div>

    在略读您的演示之后，我已将CSS包含在我的示例中。

相关问题
最新问题