Javascript accordionajaxjson内容

我有以下html结构

<div class="accordion-container">
    <ul class="accordion">
      <li class="accordion-header">
        <a class="is-active link">Accordion header<i class="accordion-header-icon"></i></a>
        <div class="accordion-content js-accordion-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, quos!</p>
        </div>
      </li>
      <li class="accordion-header">
        <a class="link">Accordion header<i class="accordion-header-icon"></i></a>
        <div class="accordion-content js-accordion-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sed ducimus iusto, atque veniam, laborum ratione quibusdam sapiente. Sint.</p>
        </div>
      </li>
      <li class="accordion-header">
        <a class="link">Accordion header<i class="accordion-header-icon"></i></a>
        <div class="accordion-content js-accordion-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sed ducimus iusto, atque veniam, laborum ratione quibusdam sapiente. Sint.</p>
        </div>
      </li>
      <li class="accordion-header">
        <a class="link">Accordion header<i class="accordion-header-icon"></i></a>
        <div class="accordion-content js-accordion-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sed ducimus iusto, atque veniam, laborum ratione quibusdam sapiente. Sint.</p>
        </div>
      </li>
    </ul>
  </div>

我试图仅在单击每个accordion头（.link）时使用json文件中的内容填充accordion内容

我已经试过了，但没有达到预期效果。当我点击一个标题时，它会填充所有其他的手风琴内容

$(document).ready(function () {
  $('.accordion').each(function (index) {
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
  });

  $('.accordion').on('click', 'li > a', function (event) {
    if (!$(this).hasClass('is-active')) {
      event.preventDefault();
      var accordionTabs = $(this).closest('.accordion');
      accordionTabs.find('.is-open').removeClass('is-open').slideUp('fast');

      $(this).next().toggleClass('is-open').slideToggle('fast');
      accordionTabs.find('.is-active').removeClass('is-active');

      $(this).addClass('is-active').closest('.accordion-content', function () {
        $.getJSON('public/js/result.json', function (jd) {
        $('.js-accordion-content').html('<p>Name: ' + jd.name + '</p>');
        $('.js-accordion-content').append('<p>Age : ' + jd.age+ '</p>');
        $('.js-accordion-content').append('<p>Sex: ' + jd.sex+ '</p>');
      });  
    });
    } else {
      event.preventDefault();
    }
  });
});

---

jQuery的

最近的

方法不接受匿名函数作为第二个参数，因此它不会在代码中激发

$(this).addClass('is-active').closest('.accordion-content', function () {

我看不到您使用

.accordion内容

选择器做任何事情，所以请忽略它

$(this).addClass('is-active');
$.getJSON(....

您还需要缓存对触发单击事件的元素的引用，以便在ajax回调的结果中引用：

var self = $(this);

我们需要本机将其包装为jQuery对象，因为作为上下文传递的第二个参数需要应用

.parent（）

，以便实际获取

.js accordion内容

元素

$('.js-accordion-content', self.parent()).html('<p>Name: ' + jd.name + '</p>');
$('.js-accordion-content', self.parent()).append('<p>Age : ' + jd.age + '</p>');
$('.js-accordion-content', self.parent()).append('<p>Sex: ' + jd.sex + '</p>');

$（'.js accordion content'，self.parent（））.html（'Name:'+jd.Name+'
'）；
$（'.js accordion content'，self.parent（））.append（'Age:'+jd.Age+'
'）；
$（'.js accordion content'，self.parent（））.append（'Sex:'+jd.Sex+'
'）；

查询“.js accordion content”对于具有相同类名的所有类似元素都是不明确的。将其与当前的“手风琴”隔离

替换：

  $(this).addClass('is-active').closest('.accordion-content', function () {
    $.getJSON('public/js/result.json', function (jd) {
    $('.js-accordion-content').html('<p>Name: ' + jd.name + '</p>');
    $('.js-accordion-content').append('<p>Age : ' + jd.age+ '</p>');
    $('.js-accordion-content').append('<p>Sex: ' + jd.sex+ '</p>');
  });  

$（this）.addClass（'is-active'）.closest（'.accordion content'，function（）{
$.getJSON（'public/js/result.json'，函数（jd）{
$（'.js accordion content'）.html（'Name:'+jd.Name+'
'）；
$（'.js accordion content'）。追加（'Age:'+jd.Age+'
'）；
$（'.js手风琴内容'）。追加（'Sex:'+jd.Sex+'
'）；
});  

与

var self=this；
$（this）.addClass（'is-active'）。最近（'.accordion content'，function（）{
$.getJSON（'public/js/result.json'，函数（jd）{
$（'.js accordion content'，self）.html（'Name:'+jd.Name+'
'）；
$（'.js accordion content'，self）.append（'Age:'+jd.Age+'
'）；
$（'.js accordion content'，self）.append（'Sex:'+jd.Sex+'
'）；
});  

---

注意使用

self

引用手风琴。

在

.getJSON

方法中使用

console.log（jd）

会得到什么？我已经按照您的建议更改了代码，现在我在console对象{name:“Zara Ali”，age:“67”，sex:“female”}但内容仍然加载到所有其他accordion内容div中，而不是仅加载到我单击的内容中。@cosmin，因为您还需要执行整个

var self=this；

和

$（'.js accordion content'，self）

正如上面答案中所建议的。您的问题实际上是我们两个答案的混合。我也尝试过，但现在我没有从json中获取任何内容到手风琴内容。@CosminAnca已解决。请检查编辑和小提琴。

$('.js-accordion-content', self.parent()).html('<p>Name: ' + jd.name + '</p>');
$('.js-accordion-content', self.parent()).append('<p>Age : ' + jd.age + '</p>');
$('.js-accordion-content', self.parent()).append('<p>Sex: ' + jd.sex + '</p>');

  $(this).addClass('is-active').closest('.accordion-content', function () {
    $.getJSON('public/js/result.json', function (jd) {
    $('.js-accordion-content').html('<p>Name: ' + jd.name + '</p>');
    $('.js-accordion-content').append('<p>Age : ' + jd.age+ '</p>');
    $('.js-accordion-content').append('<p>Sex: ' + jd.sex+ '</p>');
  });  

 var self = this;
  $(this).addClass('is-active').closest('.accordion-content', function () {
    $.getJSON('public/js/result.json', function (jd) {
    $('.js-accordion-content', self).html('<p>Name: ' + jd.name + '</p>');
    $('.js-accordion-content', self).append('<p>Age : ' + jd.age+ '</p>');
    $('.js-accordion-content', self).append('<p>Sex: ' + jd.sex+ '</p>');
  });