手风琴AJAX JSON内容

我有以下的HTML结构手风琴AJAX JSON内容

<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" 
}

来源

2014-11-06 Cos

当''.getJSON'方法内'console.log（jd）'时，你会得到什么？ – elzi 2014-11-06 20:29:50

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

来源

2014-11-06 20:31:17 Ohgodwhy

我按照你的建议更改了代码，现在我在控制台对象{name：“Zara Ali”，年龄：“67”，性别：“女性”}中获得此内容，但内容仍然会加载到所有其他手风琴内容div，而不是只在我点击的那个里面。 – Cos 2014-11-06 20:36:09

@cosmin，因为你也需要按照上面的回答建议的那样做整个'var self = this;'和'$（'。js-accordion-content'，self）'。你的问题实际上是我们两个答案的混合体。 – Ohgodwhy 2014-11-06 20:37:55

我刚刚也试过，但现在我没有从json获取任何内容到手风琴内容中。 – Cos 2014-11-06 20:41:57

查询“的.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引用手风琴。

来源

2014-11-06 20:31:20

手风琴AJAX JSON内容

回答

相关问题