Доступ к элементу в Джанго цикл

Question

У меня есть шаблон Django с помощью следующего кода, который создает несколько кнопок и пытается удалить/скрыть одну из них на щелчок (на той же кнопке):

{% for h in helicopters %} 
    <div class="btn-group" id="remove-heli"> 
     <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'> 
      {{ h }} 
     </button> 
    </div> 
{% endfor %} 

где helicopters список строк, а затем в блоке сценария у меня есть

function my_func(h) { 
    document.getElementById('remove-heli').style.visibility = 'hidden'; 
    } 

функция работает, но, как вы можете ожидать, он работает только на первый элемент моей цикл, потому что все <\div> элементов в цикл for имеет одинаковый идентификатор.

Мой вопрос: есть ли способ указать на конкретный элемент? или, наоборот, есть ли лучший способ печати кнопок рядом друг с другом?

Answer 1

Как насчет множества разных идентификаторов для элементов div?

{% for h in helicopters %} 
    <div class="btn-group" id="remove-heli-{{ h }}"> 
     <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'> 
      {{ h }} 
     </button> 
    </div> 
{% endfor %} 

Затем вы можете получить доступ к определенному элементу div с идентификатором.

function my_func(h) { 
    document.getElementById('remove-heli-' + h).style.visibility = 'hidden'; 
} 

ПРИМЕЧАНИЕ

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

UPDATE

В качестве альтернативы, вы можете использовать forloop.counter:

{% for h in helicopters %} 
    <div class="btn-group" id="remove-heli-{{ forloop.counter }}"> 
     <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'> 
      {{ h }} 
     </button> 
    </div> 
{% endfor %} 

Answer 2

Это действительно может быть достигнуто более простым путем передачи this к my_func, например:

onclick='my_func(this);' 

В this переменную содержит элемент DOM, который вызвал событие, поэтому i t будет нажата любая кнопка.

function my_func(this) { 
    this.style.visibility = 'hidden'; 
} 

Но это, конечно, работает только тогда, когда вы хотите, чтобы кнопка спряталась. Если вы хотите, чтобы это спрятало что-то еще, то использование разных идентификаторов - это путь ...

Если вы все еще путаетесь по поводу всего, что работает там, просто сделайте вид страницы Источник в браузере и вы Посмотрите, что именно создал ваш шаблон. Все остальное происходит в браузере. Инструменты разработчика браузера - ваш друг здесь. Откройте их, чтобы вы могли видеть любые ошибки, которые вы получаете и т. Д. Если вы хотите сделать это, вам нужно использовать часть разработчика в браузере, в противном случае вы сойдете с ума.