手风琴AJAX JSON内容

Question

我有以下的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> 

和这个CSS

.accordion-content { 
    display: none; } 

我试图填充手风琴内容从一个JSON文件的内容只有当点击每个手风琴插头（.link）

我试过这个，但它不能按预期工作。当我点击标题时，它会填充所有其他手风琴内容。

$(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(); 
    } 
    }); 
}); 

JSON的是这样的：

{ 
    "name": "Zara Ali", 
    "age" : "67", 
    "sex": "female" 
} 

Answer 1

jQuery的closest方法不接受匿名函数作为第二个参数，因此，这永远不会在你的代码触发。

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

我不明白你在做与.accordion-content选择反正任何事情，所以就忽略它。

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

您还需要缓存你的元素，为了你的Ajax回调的结果中引用的发射click事件的引用：

var self = $(this); 

我们需要本身把它包装成一个jQuery对象，因为我们作为上下文传入的第二个参数需要应用.parent()以实际获取.js-accordion-content元素。

$('.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>'); 

jsFiddle

Answer 2

查询“的.js，手风琴内容”是不明确的，以具有相同的类名的所有相似的元素。它隔离到当前的 “手风琴”

取代：

$(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>'); 
    }); 

注意使用self引用手风琴。