亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從點擊的元素 Django 中獲取數據

從點擊的元素 Django 中獲取數據

qq_花開花謝_0 2022-07-08 10:00:01
我有一個頁面,用戶可以在其中選擇要添加到他的團隊中的人員。頁面的一側是要選擇的人員列表。當用戶單擊添加到團隊時,它會轉到我們擁有所選人員列表的右側。我不明白如何從 django 的視圖中獲取所選一側的數據。例如左邊:<div class="card-body" id="team-list">                      <p class="card-text">Select today's teammates:</p>   <ul class="list-group list-group-flush">      {% for tech in techs %}         <li class="list-group-item">            <span class="name" name="{{tech.id}}">{{tech.name}}</span>            <span class="move" style="float: right;">Add to the team</span>         </li>      {% endfor %}在右邊:<div class="card-body" id="selected-list">  <h3 class="title">You have selected the following teammates for today: </h3>  <ul class="list-group list-group-flush" style="list-style-type: none;">  </ul></div>點擊由一個小的 js 點擊事件處理,如下所示:    var selected = document.querySelector('#selected-list ul');    var team = document.querySelector('#team-list ul');function clickHandlerTeam(e){        if(e.target.classList.contains('move')){            if (e.target.textContent == 'Add to the team'){                console.log('changing add');                e.target.textContent ='Remove from the team';                selected.appendChild(e.target.parentNode);            } else {                console.log('changing remove');                e.target.textContent = 'Add to the team';                team.appendChild(e.target.parentNode);            }            console.log('****************');        }        return;}謝謝你的幫助
查看完整描述

2 回答

?
臨摹微笑

TA貢獻1982條經驗 獲得超2個贊

{{ selected_techs=[] }}

<div class="card-body" id="team-list">                   

   <p class="card-text">Select today's teammates:</p>

   <ul class="list-group list-group-flush">

      {% for tech in techs %}

         <li class="list-group-item">

            <span class="name" name="{{tech.id}}">{{tech.name}}</span>

            <span class="move" onclick="{{ selected_techs.append(tech) }}" style="float: right;">Add to the team</span>

         </li>

      {% endfor %}

</ul>

</p>

</div>


<div class="card-body" id="selected-list">

  <h3 class="title">You have selected the following teammates for today: </h3>

  <ul class="list-group list-group-flush" style="list-style-type: none;">

      {% for tech in selected_techs %}

         <li class="list-group-item">

            <span class="name" name="{{tech.id}}">{{tech.name}}</span>

         </li>

      {% endfor %}

  </ul>

</div>

我認為這應該可以解決您的問題。只記得添加


編輯1:


嘗試這個


{% with selected_techs=[] %}

<div class="card-body" id="team-list">                   

   <p class="card-text">Select today's teammates:</p>

   <ul class="list-group list-group-flush">

      {% for tech in techs %}

         <li class="list-group-item">

            <span class="name" name="{{tech.id}}">{{tech.name}}</span>

            <span class="move" onclick="{% selected_techs.append(tech) %}" style="float: right;">Add to the team</span>

         </li>

      {% endfor %}

</ul>

</p>

</div>


<div class="card-body" id="selected-list">

  <h3 class="title">You have selected the following teammates for today: </h3>

  <ul class="list-group list-group-flush" style="list-style-type: none;">

      {% for tech in selected_techs %}

         <li class="list-group-item">

            <span class="name" name="{{tech.id}}">{{tech.name}}</span>

         </li>

      {% endfor %}

  </ul>

</div>

{% endwith %}


查看完整回答
反對 回復 2022-07-08
?
慕俠2389804

TA貢獻1719條經驗 獲得超6個贊

我找到了我的解決方案。我為模板中的每個元素添加了一個表單標簽,并刪除了 ul,將其替換為值為 tech.id 的隱藏輸入,并替換了用戶過去通過按鈕單擊的 spans 標簽。然后通過獲取 id 使用 views.py 處理它。



查看完整回答
反對 回復 2022-07-08
  • 2 回答
  • 0 關注
  • 251 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號