Question

这是我的菜单：

<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

我在页面加载时尝试点击电影按钮但我没有成功。在几个地方读书，这是我得到的结果，但不起作用

jQuery(document).ready(function() {
   jQuery('a[data-category="film"]')).trigger( "click" );
});

我对JavaScript和jQuery的了解有限，所以我可能在错误的地方或以错误的方式使用正确的脚本。

你能支持我吗？

Answer 1

您可以使用解决方案https://jsfiddle.net/hxn7cfhv/

jQuery('a[data-category="film"]').click(function(){
  console.log("Film button clicked");
});

jQuery(document).ready(function() {
  jQuery('a[data-category="film"]').trigger( "click" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

问题与您的代码jQuery('a[data-category="film"]')).trigger( "click" );有关，它在.trigger之前有额外的结束括号。

希望这对你有所帮助。

Answer 2

如果点击不起作用，您只需从链接标记中读出href属性并手动打开它;）。这里有一个应该有效的小提琴。我使用工作网址预先填写了您的链接以进行演示。

JS片段

jQuery(document).ready(function() {
   $link = jQuery('a[data-category="film"]');
   target = $link.attr("target");
   href = $link.attr("href");
   window.open(href, target);
});

https://jsfiddle.net/1oqLrL1d/3/

但是，如果您想触发绑定到链接的点击事件。请确保在调用实际触发/单击之前绑定此事件。否则它将无法工作。此外，您还可以在链接上绑定click事件并创建自己的功能。只是一些想法。

How to trigger click on page load?

代码已更新，目标处理。

Answer 3

使用Id或类

<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button filmbtn" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

jQuery(document).ready(function() {
   jQuery('.filmbtn')).trigger( "click" );
});

页面加载后，根据数据类别单击按钮

3 个答案: