Как сделать активный тип представления с добавлением и удалением списка классов? - PullRequest
Новая
       3

Как сделать активный тип представления с добавлением и удалением списка классов?

0 голосов
/ 11 мая 2018

Хорошо, у меня есть список игр, который в настоящее время оформлен в виде эскиза.Я сделал 3 других класса, которые при добавлении изменяют дочерние элементы элементов списка для создания представления списка.У меня есть один, который изменяет сами li, 2 которые изменяют дочерние узлы этого li.

У меня есть две кнопки, которые должны управлять предпочтительным типом просмотра пользователей.У них есть активный класс, который показывает, что это активный вид.

Итак, вот вопрос, как выбрать li и дочерние элементы для замены представления.Поэтому при нажатии на кнопку списка добавляются эти классы.Мне также понадобится кнопка просмотра миниатюр, чтобы удалить эти классы, но я могу понять это потом.

Разметка: 

<div id="View">
    <button id="boxes" class="btn active" title="Thumnbnail View"         onclick="thumbview()">
      <i class="fas fa-th"></i>
    </button>
    <button id="lines" class="btn" title="List View" onclick="listview()">
      <i class="fas fa-list-ul"></i>
    </button>
  </div>

<div id="sortcontainer">
  <li class="game" id="75">
    <a href="Radiant_Defence.html"> 
      <img src="Games_images/radiantdefence/banner_image.png">
      <h2 class="title">Radiant Defence</h2>
      <h2 class="date" id="2012">(2012)</h2>
      <h3>75/100</h3>
    </a>
  </li>

  <li class="game" id="80">
    <a href="plantsvszombies2.html">
      <img src="Games_images/Plantsvszombies2/bannerimage.jpg">
      <h2 class="title">Plants vs Zombies 2</h2>
      <h2 class="date" id="2013">(2013)</h2>
      <h3>80/100</h3>
    </a>
  </li>

  <li class="game" id="45">
    <a href="link">
      <img src="games_category_placeholder.jpg">
      <h2 class="title">Some game</h2>
      <h2 class="date" id="2017">(2017)</h2>
      <h3>45/100</h3>
    </a>
  </li>

  <li class="game" id="80">
    <a href="link">
      <img src="games_category_placeholder.jpg">
      <h2 class="title">Fieldrunners 2</h2>
      <h2 class="date" id="2016">(2016)</h2>
      <h3>80/100</h3>
    </a>
  </li>



</div>

И JavaScript, который у меня есть (пока новый) 

function listview() {
    var container = document.getElementById("sortcontainer");
    var li = container.getElementsByTagName("li");
    for (var i = 0; i < li.length; i++);
    li.classList.add("lilistview");
};

Заранее благодарю, если у кого-то есть предложения

...