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

Question

我有一个不同服务器的列表。因此，当单击“连接”按钮时，我想连接到该特定服务器。 如何使用 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 %}

Answer 1

首先，删除父级<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>