如何将变量的值从一个 div 传递到同一模板中的另一个 div？

Posted 2023-02-24

【中文标题】如何将变量的值从一个 div 传递到同一模板中的另一个 div？

【英文标题】：How can I pass the value of variable from one div to another div in the same template?

【发布时间】：2019-04-08 18:19:03

【问题描述】：

我正在使用循环从模型对象中获取数据。我试图在两个不同的 div 之间传递相同的变量i。我想要相同的i，因为我需要它来获取相同的对象。我是这个领域的新手，也许我在做一些愚蠢的事情。

任何帮助将不胜感激。

这里是sn-p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-dark">
            <thead>
               <tr>
                  <th scope="col">S.N</th>
                  <th scope="col">Company Name</th>
                  <th scope="col">Trade Ref Date</th>

               </tr>
            </thead>
              <tbody>
          % for i in records %
              <tr>
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>i.company</td>
                  <td>i.address</td>
                  <td>i.contact</td>


                  </td>
               </tr>
            % endfor %
              </tbody>
         </table>
         <div class="modal fade" id="data1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <div class="modal-header">
                     <h3 class="modal-title title" id="exampleModalLabel">Trade Details</h3>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                     </button>
                  </div>
                  <div class="modal-body">
                     <div class="card-body card-block">
                        <div class="displaydata">
                           <div class="description">
                              <ul>
                              <!--I'm not able to get objects variable value in here-->
                                 <li>i.sn</li>
                                 <li>i.company</li>
                                 <li>i.address</li>
                                 <li>i.contact</li>
                              </ul>
                           </div>
                           <table class="table table-bordered">
                              <tbody>
                                 <tr>
                                    <th scope="col">Sales </th>
                                    <th scope="row">Purchase</th>
                                 </tr>
                                 <tr>
                                    <th scope="col"><span>Sale/Cancel Sales : </span>i.sales<span></span></th>

                                 </tr>

                                       </tbody>
                           </table>

【问题讨论】：

您无法在% for % % endfor % 循环之外访问i 变量。您可以在<div class="description"> 中使用另一个循环。这是你需要的吗？

【参考方案1】：

您无法在循环之外访问内部范围变量，我的理解是您想要显示关于您记录中选定数据的描述和一些销售数据。如果是这样，您可以使用点击事件。并获取传递函数中的特定数据，并在您各自的位置显示这些数据。 喜欢

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-dark">
            <thead>
               <tr>
                  <th scope="col">S.N</th>
                  <th scope="col">Company Name</th>
                  <th scope="col">Trade Ref Date</th>

               </tr>
            </thead>
              <tbody>
          % for i in records %
              <tr onclick="somefunction(i)">
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>i.company</td>
                  <td>i.address</td>
                  <td>i.contact</td>


                  </td>
               </tr>
            % endfor %
              </tbody>
         </table>

现在为clickevent编写函数

<script>
function somefunction(data)
  document.getElementById("sn").innerhtml = data.sn;
  document.getElementById("company").innerHTML = data.company;
  document.getElementById("addr").innerHTML = data.addr;
  document.getElementById("contact").innerHTML = data.contact;
  document.getElementById("sales").innerHTML = data.sales;

</script>

现在，当您单击/选择记录时，下面的 div 将包含您选择的记录

<div class="modal fade" id="data1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <div class="modal-header">
                     <h3 class="modal-title title" id="exampleModalLabel">Trade Details</h3>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                     </button>
                  </div>
                  <div class="modal-body">
                     <div class="card-body card-block">
                        <div class="displaydata">
                           <div class="description">
                              <ul>
                              <!--I'm not able to get objects variable value in here-->
                                 <li id="sn">#</li>
                                 <li id="company"></li>
                                 <li id="addr"></li>
                                 <li id="contact"></li>
                              </ul>
                           </div>
                           <table class="table table-bordered">
                              <tbody>
                                 <tr>
                                    <th scope="col">Sales </th>
                                    <th scope="row">Purchase</th>
                                 </tr>
                                 <tr>
                                    <th scope="col"><span>Sale/Cancel Sales : </span><span id="sales"></span></th>

                                 </tr>

                                       </tbody>
                           </table>

【讨论】：

感谢您的回复。它部分工作，它将所有值显示为“未定义”。有什么办法可以访问对象属性的实际值。

【参考方案2】：

你的代码错了，这部分代码会重复记录的数量，所以你会有很多 i 的值

% for i in records %
              <tr>
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>i.company</td>
                  <td>i.address</td>
                  <td>i.contact</td>
                  </td>
               </tr>
            % endfor %

但是当你有很多时，你想在下面插入哪个值 -^)

<li>i.sn</li>
<li>i.company</li>
<li>i.address</li>
<li>i.contact</li>