Использование Django Models для назначения от HTML div до jQuery - PullRequest
Новая
       0

Использование Django Models для назначения от HTML div до jQuery

0 голосов
/ 08 мая 2020

в течение последних нескольких дней я пытался создать метод в jquery с использованием моделей django, и я обнаружил, что очень не в себе, и был бы признателен за объяснение, которое я могу получить. Итак, в настоящее время у меня есть модель django, в которой есть следующая информация: имя, дата, местонахождение, семестр. Я использую первые 3 части информации при отображении моего html, однако я хочу использовать 'semester', чтобы увидеть, в какой тег div мои элементы go входят.

Тег semester может либо возвращать 'Fall 'или' Spring '- есть способ использовать это для назначения компонентов правильному div. Итак, если семестр осенний, тогда он должен go в div с идентификатором 'fall-races', а если его весна, он должен go в 'spring-race'

В настоящее время у меня только jquery работаю, где я получаю все элементы и назначаю их другому div.

Спасибо за вашу помощь и любые возможные советы. 

<div class="flex-column">
        <div class="header shadow-lg">
            <h1 class="text-center py-3">
                Fall Schedule
            </h1>
        </div>
        <div id="fall-races">
            {% for race in race %}
                <div class="regatta-card my-2 mx-2 ">
                    <h2 class="center-text py-2">{{ race.date }}</h2>
                    <h1 class="text-center my-2">{{ race.name }}</h1>
                    <h3 class="text-center mb-3">{{ race.location}}</h3>
                    <h6 class="text-center"><a href="#">Recap</a></h6>
                </div>
            {% endfor %}
        </div>

        <input type="button" onclick="findChildren()" value="Click it" />

        <div class="header shadow-lg">
            <h1 class="text-center py-3">
                Spring Schedule
            </h1>
        </div>
        <div id="spring-races">

        </div>

    </div>

    <script>
        function findChildren() {
            var objChl  = document.getElementById('fall-races').children;
            var msg = document.getElementById('spring-races');
            msg.innerHTML = '';

            for (i = 0; i < objChl.length ; i++) {
                msg.appendChild(objChl[i]);
            }
        }
    </script>

1 Ответ

1 голос
/ 09 мая 2020

Может быть, вам нужно что-то вроде этого:

Html: 

<!-- Some html stuff -->
<div id="fall-races">
        {% for race in race %}
            <div class="regatta-card my-2 mx-2 ">
                <h2 class="center-text py-2">{{ race.date }}</h2>
                <h1 class="text-center my-2">{{ race.name }}</h1>
                <h3 class="text-center mb-3">{{ race.location}}</h3>
                <h6 class="text-center"><a href="#">Recap</a></h6>
                <input type="hidden" value="{{race.semester}}" />
            </div>
        {% endfor %}
    </div>
    <!-- Some html stuff -->

JS: 

    <script>
    function findChildren() {
        var parent = document.getElementById('fall-races');
        var objChl  = parent.children;
        var msg = document.getElementById('spring-races');
        msg.innerHTML = '';

        for (i = 0; i < objChl.length ; i++) {
            const element = objChl[i];
            var value = element.getElementsByTagName("input")[0].value;
            if (value==="Spring"){
              msg.appendChild(element);
              parent.removeChild(element);
             }

        }
    }
    </script>

Это как самый простой способ достичь это, надеюсь, это поможет вам.

...