时间戳

首页 > 解决方案 > 如何使用 jQuery 在列表中选择正确的按钮？

javascript - 如何使用 jQuery 在列表中选择正确的按钮？

问题描述

我有一个不同服务器的列表。因此，当单击“连接”按钮时，我想连接到该特定服务器。如何使用 jQuery 选择正确的按钮？先感谢您！

{% for  server in servers%}
  {% if server.credential.user == user %}
    {% if server.credential.protocol == 'vnc' %}
      <a>
        <div class="p-l-20" id="server_details">
          <h4>{{server.name}}</h4>
          <h6>Hostname: {{server.hostname}}</h6>
          <h6>IP Address: {{server.ip}}</h6>
          <h6>Protocol: {{server.credential.protocol|upper}}</h6>
          <h6>User: {{server.credential.user}}</h6>
          <button type="button" >Connect</button>
        </div>
      </a>
    {% endif %}
  {% endif %}
{% endfor %}

标签： javascriptjquerydjangotemplates

解决方案

首先，删除父级<a>，因为您不能有嵌套的可点击元素。其次，您正在创建许多id无效的元素，因为它们在 DOM 中必须是唯一的。改为server_details上课。

要实现您需要的内容，请向button元素添加事件处理程序。从那里您可以遍历 DOM 以找到必要的服务器信息。在下面的示例中，我span在 IP 地址周围添加了一个类，您可以将其作为目标来读取它text()，但是对于您想要读取的任何其他详细信息，模式都是相同的：

$('button').on('click', function() {
  var ip = $(this).closest('.server_details').find('.ip').text();
  console.log(ip);
});
.server_details {
  margin-bottom: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-l-20 server_details">
  <h4>{{server.name1}}</h4>
  <h6>Hostname: {{server.hostname1}}</h6>
  <h6>IP Address: <span class="ip">{{server.ip1}}</span></h6>
  <h6>Protocol: {{server.credential.protocol1|upper}}</h6>
  <h6>User: {{server.credential.user1}}</h6>
  <button type="button">Connect</button>
</div>
<div class="p-l-20 server_details">
  <h4>{{server.name2}}</h4>
  <h6>Hostname: {{server.hostname2}}</h6>
  <h6>IP Address: <span class="ip">{{server.ip2}}</span></h6>
  <h6>Protocol: {{server.credential.protocol2|upper}}</h6>
  <h6>User: {{server.credential.user2}}</h6>
  <button type="button">Connect</button>
</div>

推荐阅读