Question

因此，我有一个名为runFilter的函数。单击即可运行，效果很好。如果您查看“加载时，运行过滤器”下面的行，那根本不起作用。如果它是.css（）之类的内置函数，那么它将很好用，但这不是内置函数，我已经无法扩展jQuery以使其成为一个。

我可能在这里犯了一个非常明显的错误，但是我想发生的是该函数在页面加载后触发一次，针对此特定链接：ul> li：first-child a。

jQuery(document).ready(function( $ ) {

    function runFilter( event ) {

        console.log( this );

        event.preventDefault();

        //* add active class on the active nav item
        $( 'ul.attractions-filters a' ).removeClass( 'active' );
        $( this ).addClass( 'active' ); 

        //* add active class for visible things
        term = $( this ).attr( 'data-term' );
        $( '.type-attractions' ).removeClass( 'active' );
        $( '.attractiontype-' + term ).addClass( 'active' );
    }

    // Show everything once the page is fully loaded
    $( '.type-attractions' ).addClass( 'active' );

    //* On load, run the filter
    // $( 'ul.attractions-filters:first a' ).on( 'load', runFilter );

    //* On click, run the filter
    $( 'ul.attractions-filters a' ).on( 'click', runFilter );

});

Answer 1

虽然不清楚您实际上是要引用哪个A的哪个UL，但是有很多不同的处理方式：

下面的示例取决于几件事：

jQuery将通过.on调用通过.click附加的任何方法方法。它会自动将其绑定到函数。
jQuery将允许您通过.trigger方法调用已知事件。它会自动将其绑定到功能
querySelector仅返回与选择器匹配的第一个元素（比等效的jQuery选择器更容易阅读）

let selector = 'ul.attractions-filters a';
let firstSelector = 'ul.attractions-filters:first a';
let firstChildSelector = 'ul.attractions-filters a:first';
let firstChildSelectorJQ = 'ul.attractions-filters:first a:first';
let whatYouAskedFor = 'ul > li:first-child a'

$(function() {
  function runFilter() {
    console.log(this)
  }

  $(selector).on('click', runFilter);
  
  console.log( "This selector will click all A elements in the first UL with class 'attractions-filters'")
  $(firstSelector).click();
  $(firstSelector).trigger('click');

  console.log( "This selector will click the first A element in every UL with class 'attractions-filters'")
  $(whatYouAskedFor).click();
  $(whatYouAskedFor).trigger('click');

  console.log("These selectors will click the first A element in the first UL with class 'attractions-filters'")
  $($(firstSelector)[0]).click();
  $($(firstSelector)[0]).trigger('click');
  $(firstChildSelector).click();
  $(firstChildSelector).trigger('click');
  runFilter.bind($(firstSelector)[0])();

  console.log("These selectors will select only the first child of the first UL of class 'attractions-filters' and click it")
  $(firstChildSelectorJQ).click();
  $(firstChildSelectorJQ).trigger('click');
  runFilter.bind($(firstChildSelectorJQ)[0])();
  runFilter.bind(document.querySelector(selector))();

  console.log("This selector is the requirement you gave")
  runFilter.bind(document.querySelector(whatYouAskedFor))();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a href="#what?">What You Asked For</a></li>
</ul>
<ul class="attractions-filters">
<li><a href="#first">UL 1, LI 1</a></li>
<li><a href="#second">UL 1, LI 2</a></li>
</ul>
<ul class="attractions-filters">
<li><a href="#third">UL 2, LI 1</a></li>
<li><a href="#fourth">UL 2, LI 2</a></li>
</ul>

Answer 2

您非常亲密！

您的代码，在下面进行了修改，并带有一些注释：

// altered to be a briefer document ready (Still no-conflict safe!)
jQuery(function( $ ) {
    function runFilter( event ) {
        event.preventDefault();
        // add active class on the active nav item
        $( 'ul.attractions-filters a' ).removeClass( 'active' );
        $( this ).addClass( 'active' ); 

        // add active class for visible things
        term = $( this ).attr( 'data-term' );
        $( '.type-attractions' ).removeClass( 'active' );
        $( '.attractiontype-' + term ).addClass( 'active' );
    }

    // Show everything once the page is fully loaded
    $( '.type-attractions' ).addClass( 'active' );

    // On click, run the filter
    $( 'ul.attractions-filters a' ).on( 'click', runFilter );

    // NOTE: Choose ONE of the following three methods:
    // Method #1: using trigger
    $( 'ul.attractions-filters:first a' ).trigger( 'click' );

    // Method #2: using click
    $( 'ul.attractions-filters:first a' ).click();

    // Method #3: better yet "chain" the methods to reduce duplicate code...
    // NOTE: this replaces BOTH your .on('click') AND the .trigger or .click above...
    $( 'ul.attractions-filters a' )
        .on( 'click', runFilter )
        .trigger( 'click');
});

我有一个命名函数，在单击时效果很好。页面加载后如何在特定元素上运行它？

2 个答案: