Question

大家好我正试图从我的JSON动态创建崩溃。

这就是我崩溃的样子：

这是我崩溃所需的JSON的一部分：

var cities_visit_list = [
    {
      "city": "Shangahi",
      "date": "05.10.2017",
      "accommodation": "Hotel",
      "accommodation_name": "Hotel King",
      "adress": "BB 23",
      "zip": "555"
    },
    {
      "city_name": "Xian",
      "date": "09.10.2017",
      "accommodation": "Hotel",
      "accommodation_name": "Hotel Warrior",
      "adress": "AA 55",
      "zip": "777"
    }
  ];

对于不同的用户，数组内的对象数量会有所不同。现在我面临两个问题：首先我不需要来自我的对象的所有数据，然后如何使用相应的数据来定位每个崩溃。

我试过这样的事情：

    var dropContent = '';
    if (cities_visit_list) {
        var dropData = cities_visit_list;
        $.each(dropData,function(title,data) {
            dropContent = dropContent + '<div class="faqQuestion">';
                dropContent = dropContent + '<h5>' + 'Accomodation ' + (title+1) + '</h5>';
            dropContent = dropContent + '</div>';
            $.each(data, function(key, val) {
                dropContent = dropContent + '<div class="faqQuestion">';
                    dropContent = dropContent + '<h5>' + val + '</h5>';
                dropContent = dropContent + '</div>';
            });
        });
    }

但这样我得到错误的HTML结构，我从对象获取所有数据，我只需要其中一些（类型，名称，地址）。

我还想过这样做：

    if (cities_visit_list) {
        for (var i = 0; i < proc.cities_visit_list.length; i++) {
            $('.myColumn3').append("<div class='accommodation" + (i+1) + "'><span>Accomodation " + (i+1) + "</span></div>");
        }   
    }

然后通过类手动添加我需要的内容，但这似乎是解决这个问题的错误方法。

所以我的问题是如何使用JSON中的相应数据动态创建折叠，但只能创建我需要的数据？

这是codepen，因此您可以更好地了解我正在尝试制作的内容：https://codepen.io/Karadjordje/pen/zPrYvX?editors=1010

Answer 1

我稍微更改了您的codepen，为您提供了如何使用JSON数据的示例。这是你在找什么？

https://codepen.io/anon/pen/XzMRbO

var cities_visit_list = [
        {
          "city": "Shangahi",
          "date": "05.10.2017",
          "accommodation": "Hotel",
          "accommodation_name": "Hotel King",
          "street_number": "23",
          "zip": "555"
        },
        {
          "city_name": "Xian",
          "date": "09.10.2017",
          "accommodation": "Hotel",
          "accommodation_name": "Hotel Warrior",
          "street_number": "55",
          "zip": "777"
        }
      ];

for (var i = 0; i<cities_visit_list.length; i++) {
    var accommodationDiv = "<div class='faqQuestion'><h5>Accomodation " + (i+1) + "<i class='fa fa-chevron-up rotate'></i></h5> " +
        "<div class='content'>" +
        "<div>" + cities_visit_list[i]['accommodation'] + "</div>" +
            "<div>" + cities_visit_list[i]['accommodation_name'] + "</div>"
    
        "</div>" + 
        "</div>";
    $('.myContent').append(accommodationDiv);
}

$(".faqQuestion").click(function() {
    $(this).find('.content').slideToggle('1000');
    $(this).find('.rotate').toggleClass("down");
});

.faqQuestion .rotate {
    -moz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.faqQuestion .rotate.down {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.content {
    display: none;
}

<div class="faqQuestion">
    <h5>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, a ?<i class="fa fa-chevron-up rotate"></i>
    </h5>
</div>
<div class="faqAnswer">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, ex! Rerum ex tempore fugit repudiandae tempora quo id numquam cum?</p>
</div>

<div class="myContent">
    
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

我认为使用面向组件的结构会更好，比如React，Vue.js或Angular上的结构。

我用React重写了你的笔。亲眼看看：

https://codepen.io/fabiodb/pen/zPZwxb

// $(".faqQuestion").click(function() {
//     $(this).next().slideToggle('1000');
//     $(this).find('.rotate').toggleClass("down");
// });

const cities_visit_list = [
        {
          "city": "Shangahi",
          "date": "05.10.2017",
          "accommodation": "Hotel",
          "accommodation_name": "Hotel King",
          "street_number": "23",
          "zip": "555"
        },
        {
          "city_name": "Xian",
          "date": "09.10.2017",
          "accommodation": "Hotel",
          "accommodation_name": "Hotel Warrior",
          "street_number": "55",
          "zip": "777"
        }
      ];


class App extends React.PureComponent {
    state = { active: -1 };

    handleClick = (i) => this.setState(s => ({ active: i === s.active ? -1 : i }));
    
    render() {
        return (
            <div>
                <h1>Cities:</h1>
                { this.props.cities.map(
                    (c, i) => <City data={c} index={i}
                                  active={ i === this.state.active }
                                  onClick={ () => this.handleClick(i) } />
                ) }
            </div>
        );
    }
}

function City({ data, index, active, onClick }) {
    return (
        <div className="faqQuestion">
            <h5 onClick={ onClick }>
                Accomodation { index }
                <i className={"fa fa-chevron-up rotate " + (active ? 'down' : '')}/>
            </h5>
            { active && <CityContent data={data}/> }
        </div>
    )
}

function CityContent({ data }) {
    return (
        <div>
            Name: { data.accommodation_name }
        </div>
    );
}

ReactDOM.render(<App cities={ cities_visit_list }/>,
               document.getElementById('myContent'))

.faqQuestion .rotate {
  -moz-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.faqQuestion .rotate.down {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.faqAnswer {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myContent">
</div>

使用JSON数据创建折叠

2 个答案: