Вывод в столбец js

186

23 июня 2019, 17:40

Столкнуля с следующей проблемы: Есть файл json следующего вида:

"type": "Mazda (с 2012-05-05)\n" +
        "Opel (с 2012-05-05)\n" +
        "Jaguar (с 2012-11-07)\n",

Кроме этих трех будет n-ое число. Идея в том, что первончально мы видим только первую строку:Mazda (с 2012-05-05), все остальные скрыты. По нажатию на кнопку нужно развернуть весь список, что бы текст был не в строчку а в столбец, каждая позиция в своё теге. У меня получается сделать только в строчку и в один тег запихнуть

const cars = { 
  "type": "Mazda (с 2012-05-05)\n" + 
    "Opel (с 2012-05-05)\n" + 
    "Jaguar (с 2012-11-07)\n", 
}; 
 
 
function show() { 
  document.getElementById("hideCars").style.display = "block"; 
  document.getElementById("btnShow").style.display = "none"; 
  document.getElementById("btnHide").style.display = "block"; 
} 
 
 
function hide() { 
  document.getElementById("hideCars").style.display = "none"; 
  document.getElementById("btnShow").style.display = "block"; 
  document.getElementById("btnHide").style.display = "none"; 
}

#hideCars { 
  display: none; 
} 
 
#btnHide { 
  display: none; 
}

Машины: 
<br>биби 
<div id="hideCars"> 
  for (var i=1; i 
  < cars.type.lenght;i++){ cars.type.split( "\n").[a] } </div> 
    <button id="btnShow" onclick="show()">Показать все</button> 
    <button id="btnHide" onclick="hide()">Скрыть все</button>

Answer 1

const DATA = { 
  carList: [ 
    {name: 'Mazda', text: '(с 2012-05-05)'}, 
    {name: 'Opel', text: '(с 2012-05-05)'}, 
    {name: 'Jaguar', text: '(с 2012-11-07)'}, 
  ] 
}; 
const CAR_LIST_ID = '#car-list'; 
const TOOGLER_ID = '#toogler'; 
 
for (let carIndex in DATA.carList) { 
    let currentCar = DATA.carList[carIndex]; 
    renderCar(currentCar, CAR_LIST_ID) 
} 
 
function renderCar(car, parentId) { 
  if (!car || !parentId) {return;} 
  $(parentId).append(`<li><p><strong> ${car.name}</strong><span>${car.text}</span></p></li>`); 
} 
 
jQuery(document).on('click.toogleCarList',TOOGLER_ID, (event) => { 
  event.preventDefault(); 
  let $currentButton = $(event.currentTarget), 
      $carListElement = $(CAR_LIST_ID); 
  $carListElement.slideToggle(300,function(){ 
    $currentButton.text($(this).is(':visible') ? 'Скрыть тачки' : 'Показать тачки'); 
  }); 
});

.car-list { 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<p>Машины: <button id="toogler">Показать тачки</button></p> 
<ul id="car-list" class="car-list"></ul>