Как показать / скрыть элементы списка в Django? (используя JS или JQuery) - PullRequest
Новая
       6

Как показать / скрыть элементы списка в Django? (используя JS или JQuery)

0 голосов
/ 05 апреля 2020

Я пишу сайт с использованием Django фреймворка, но я новичок ie в этой веб-фреймворке, и я не знаю, как работать с JavaScript в Django шаблонах. Я просто хотел показать / скрыть элементы списка по клику, но я показываю / скрываю только первый или последний элемент.

Мой код: 

{% for mysong in album.song_set.all %}

<li onclick=action()><a>CLICK ME</a></li>

<div id="{{mysong.id}}">
    <h1>{{mysong}}</h1>
    <img src="{{album.album_logo}}" width="300px"><br/>
    <h2>Song: {{mysong.song_title}}</h2>

    <h2>Artist: {{album.artist}}</h2>
    <h2>
    <audio controls>
            <source src="{{mysong.audiotrack.url}}" type="audio/mpeg">
    </audio>
    </h2>
</div>
<script>
    function action() {

      var added_item_button = document.getElementById('{{mysong.id}}');
      var actualDisplay = getComputedStyle(added_item_button).display;
      if (actualDisplay == 'none') {
        added_item_button.style.display = 'block';
      } else {
        added_item_button.style.display = 'none';
      }
    }
</script>
{% endfor %}

Вот как Я пытался показать / скрыть элементы списка, который я перебрал. Но, похоже, это не так. Спасибо, любая помощь будет оценена.

1 Ответ

0 голосов
/ 05 апреля 2020

Проблема с вашим кодом заключается в том, что в итоге вы получаете несколько слегка отличных JS функций, все они объявлены как function action() {...}. В JS одной и той же переменной нельзя присвоить более одного значения - поэтому action относится только к одному из них (я полагаю, к последнему, который будет объявлен), и способ установки этого кода означает что любой клик будет показывать / скрывать только один элемент.

Существует ряд более эффективных способов сделать это, чтобы избежать этой проблемы и работать правильно. Одна из них - иметь только одну функцию, но передавать ей параметр.

Таким образом, у вас будет только одна функция JS (объявленная полностью вне вашего шаблона l oop), которая выглядит следующим образом: 

function action(id) {
  var added_item_button = document.getElementById(id);
  var actualDisplay = getComputedStyle(added_item_button).display;
  if (actualDisplay == 'none') {
    added_item_button.style.display = 'block';
  } else {
    added_item_button.style.display = 'none';
  }
}

И иметь атрибут onclick каждого <li> следующим образом: 

<li onclick="action({{ mysong.id }})"><a>CLICK ME</a></li>

Хотя есть альтернативы - включая включение атрибута в <li>, называемого, скажем, data-id, который указывает на идентификатор элемента, который необходимо показать и скрыть, - который вы можете затем извлечь из функции action.

Я также настоятельно рекомендую вам не включать JS в ваши HTML через onclick атрибуты, но вместо этого добавьте такие обработчики событий в ваш JS, например, с помощью метода addEventListener.

...