时间戳

首页 > 解决方案 > 单击具有数据属性的按钮

javascript - 单击具有数据属性的按钮

问题描述

我正在为 Greasemonkey（或 Tempermonkey）的网站编写脚本扩展。当我想自动聚焦（甚至自动单击）不包含 id 而是包含数据属性的按钮时，就会出现问题。

<div id="wrapper_container">
    <form id="form1" action="/?module=Action" method="post">
<table class="thinline" align="center">
    <tbody>
    <tr>    
        <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
        <td><button class="btn btn-small" data-info="contact" data-value="184">Go</button></td>
    </tr>
    <tr>    
        <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
        <td><button class="btn btn-small" data-info="contact" data-value="185">Go</button></td>
    </tr>
    <tr>    
        <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
        <td><button class="btn btn-small" data-info="contact" data-value="186">Go</button></td>
    </tr>
    <tr>    
        <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
        <td><button class="btn btn-small" data-info="contact" data-value="187">Go</button></td>
    </tr>
    </tbody>
</table>
    </div>
</div>

已经尝试了很多次，但我无处可去，想知道为什么这不起作用：

$("#wrapper_container button:eq(4)").focus();

试图在 div 中选择第 4 个（或未来第 n 个）按钮，但不走运。

例如，我希望将数据值“186”的按钮聚焦或单击页面加载。由于我得到的条目比显示的多，我想为我选择的每个第 n 个按钮都这样做。

提前致谢。

标签： javascriptjqueryhtml

解决方案

如果您只需要关注 data-value = 186 的静态方式按钮，请使用以下命令：

$("#wrapper_container button:eq(2)").focus();

看看这个例子有更多的控制，只需传递你想要的值：

$('#wrapper_container button').each(function() {
  var dataValue = $(this).data("value");
  if (dataValue == 186) {
    $(this).focus();
  }
});
button:focus {
  background: limegreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<div id="wrapper_container">
  <form id="form1" action="/?module=Action" method="post">
    <table class="thinline" align="center">
      <tbody>
        <tr>
          <td>1</td>
          <td>Name</td>
          <td>Surname</td>
          <td>E-mail</td>
          <td>Phone Number</td>
          <td>Contact</td>
          <td>
            <button class="btn btn-small" data-info="contact" data-value="184">
               Go
            </button>
          </td>
        </tr>
        <tr>
          <td>1</td>
          <td>Name</td>
          <td>Surname</td>
          <td>E-mail</td>
          <td>Phone Number</td>
          <td>Contact</td>
          <td>
            <button class="btn btn-small" data-info="contact" data-value="185">
               Go
            </button>
          </td>
        </tr>
        <tr>
          <td>1</td>
          <td>Name</td>
          <td>Surname</td>
          <td>E-mail</td>
          <td>Phone Number</td>
          <td>Contact</td>
          <td>
            <button class="btn btn-small" data-info="contact" data-value="186">
               Go
            </button>
          </td>
        </tr>
        <tr>
          <td>1</td>
          <td>Name</td>
          <td>Surname</td>
          <td>E-mail</td>
          <td>Phone Number</td>
          <td>Contact</td>
          <td>
            <button class="btn btn-small" data-info="contact" data-value="187">
               Go
            </button>
          </td>
        </tr>
      </tbody>
    </table>
</div>
</div>

推荐阅读