Question

我正在尝试显示记录，然后允许用户查看特定记录。记录是用python收集的。当用户点击特定记录的应用程序ID时，我想存储应用程序ID，以便使用它来查询记录的更多细节。

我有一个循环，其中从python收集的所有记录都显示在html表中。每个记录的应用程序ID都会正确显示。但是当我尝试通过单击应用程序ID的按钮来存储数据时，它始终存储显示的第一条记录的应用程序ID。例如，第一个应用ID是3，第二个是13.如果我点击13，它将存储3。不确定为什么会这样，因为它正确显示。我附上了正在发生的图像。任何帮助将不胜感激。

我的HTML：

<tbody>
              {% for row in rows %}
                <tr>
                  <td>
                    <input type='button' name="number" id = 'number' type="submit" onclick="initStorage()" value = {{row.id}} ></input>
                  </td>
                  <td>{{ row.name }}</td>
                  <td>{{ row.email }}</td>
                  <td>{{ row.phone }}</td>
                </tr>
              {% endfor %}
</tbody>

我的Javascript：

[<script type = 'text/javascript'>
  function initStorage() {
    function saveNumber() {
      var number = document.getElementById('number');
      localStorage.setItem('number', number.value);
      alert(localStorage.getItem('number'));
    }
    saveNumber();
  }

</script>][1]

Photo of issue: select application 13, but it wants to store 3

Answer 1

id代码represents a unique element。即使您的代码正在更新value属性，仍然只有一个元素在DOM中注册为number。此注册采用呈现为id="number"的第一个元素的值（在本例中为3）。

使用this作为initStorage()的参数来获取被点击元素的属性，而不是搜索saveNumber()中的元素。此外，为每个元素提供唯一ID - 您可以通过编程方式添加后缀来执行此操作（还有许多其他方法）。即使您最后没有按照id中的id引用元素，仍然可以保持<div class='page'> /*Some more divs*/ <div class='section feature-1 ' > <img src='image1.jpg' class='divToShowHide' height="30%" width="50%"/> <div class='section feature-1 feature-1-content'> <h2>TEXT HERE ! </h2></div> </div> /*More similar divs here*/ </div>代码的唯一性。

这是一个小提琴演示：https://jsfiddle.net/kwu7oLju/

Answer 2

[<script type = 'text/javascript'>
      function initStorage(val) {
        function saveNumber() {          
          localStorage.setItem('number', val);
          alert(localStorage.getItem('number'));
        }
        saveNumber();
      }
    
    </script>]

<tbody>
                  {% for row in rows %}
                    <tr>
                      <td>
                        <input type='button' name="number" id = 'number' type="submit" onclick="initStorage({{row.id}})" value = {{row.id}} ></input>
                      </td>
                      <td>{{ row.name }}</td>
                      <td>{{ row.email }}</td>
                      <td>{{ row.phone }}</td>
                    </tr>
                  {% endfor %}
    </tbody>

我让你的代码更容易理解。这样你就可以在按下按钮时直接传递值，而不需要通过jquery访问它。

另一种可能的解决方案是使用类而不是id='number'即。 class='number'并通过jquery中的单击访问它，但没有像这样的onclick函数

$('.number').on('click',function(){
     var number = $(this).val();
});

循环html输入值（使用python）

2 个答案: