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

Posted 2023-02-24

【中文标题】如何使用 jQuery 在列表中选择正确的按钮？

【英文标题】：How to pick the right button within a list with jQuery?

【发布时间】：2019-10-07 21:39:59

【问题描述】：

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

【问题讨论】：

不是您问题的答案，但您正在为外观中的元素设置 id。这意味着可能有许多具有该 ID 的元素，这是不允许的。改用一个类。

【参考方案1】：

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

要实现您的要求，请将事件处理程序添加到 button 元素。从那里您可以遍历 DOM 以找到必要的服务器信息。在下面的示例中，我在 IP 地址周围添加了一个span，并带有一个您可以定位到读取其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>

【讨论】：

非常感谢！！它可以工作，但是当我将 var ip = $(this).closest('.server_details').find('.ip').text(); 更改为 var ip = $(this).closest('div').find('.ip').text(); 时，我得到了 IP 地址

听起来你没有将class 添加到父div，但只要你让它正常工作就可以了。如果有帮助，请不要忘记接受答案

我完全按照您所说的做了，但是使用 console.log 在浏览器控制台中没有显示任何内容，直到我按照我告诉您的那样将 '.server_details' 更改为 'div'。