如何单击带有 Javascript 无法识别的自定义 ID 的按钮？ 如果没有名称或标签或ID，可以做吗？

Question

有一个网站我正在尝试使用 JavaScript 自动应用折扣代码。 我需要知道另一种方法来让这个特定按钮提交（）或点击（）它。 我已经找到了一种输入代码的方法，因为该元素有一个 ID。 但是，此按钮并非如此。 当我使用 data-trekkie-id ID“apply_discount_button”时，它无法识别该 ID。

    <button name="button" type="submit" class="field__input-btn btn btn--disabled" data-trekkie-id="apply_discount_button" aria-busy="false">
          <span class="btn__content visually-hidden-on-mobile" aria-hidden="true">
            Apply
          </span>
          <span class="visually-hidden">
            Apply Discount Code
          </span>
          <svg class="icon-svg icon-svg--size-16 btn__icon shown-on-mobile" aria-hidden="true" focusable="false"> <use xlink:href="#arrow" /> </svg>
          <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button" /> </svg>

Answer 1

我没有得到 100% 的关于你正在寻找的东西。 但我猜您想选择带有自定义 html5 数据属性（ data-trekkie-id ）的按钮。

您可以使用以下行在 javascript 中选择按钮：

const discountButton = document.querySelector('[data-trekkie-id="apply_discount_button"]');

它将返回具有属性data-trekkie-id="apply_discount_button"的第一个匹配项。

然后你可以通过附加addEventListener方法来监听这个元素上的事件。

就像你想监听这个元素上的点击事件一样，代码将是：

 discountButton.addEventListener('click', function(){
     alert('Discount button was clicked.'); // Replace this line with your code
 });

Answer 2

由于 HTMl 的灵活性，您可以创建自己的属性并随心所欲地使用它们； 如果您曾经使用过引导程序，您会看到它们向 html 标签添加了一些属性，您也可以这样做。 要使用 data-trekkie-id 属性捕获按钮上的 clic 事件，您可以让 Jquery 执行以下操作：

$("[data-trekkie-id=apply_discount_button]").click(function(){
  //some stuff
})

或者干脆：

$("[data-trekkie-id]").click(function(){
    //some stuff
})

希望我的回答有帮助！