Question

我需要一个附加到元素的事件处理程序，默认情况下是不可见的。

在那里，您可以找到几个jQuery标签，默认情况下，我定位的标签也是不可见的。

<div id="help" class="hidden">
     <div id="my-help-tab" class="hidden">
         <div class="targeted">
             <a href="#" class="show-hide">Show</a>
             <pre>test</pre>
         </div>
     </div>
</div>

现在我如何附加一个事件处理程序（.toggle()用于显示/隐藏），当元素不具有hidden类（以及它的子类）时触发）？

我当前的解决方案不是在第一次触发，而是仅在第二次或第三次点击时触发。

jQuery( document ).ready( function($)
{
    $( '.targeted' ).on( 'click', function( e )
    {
        event.preventDefault();
        $( this ).children( '.show-hide' ).on( 'click', function( e )
        {
            $( this ).toggle(
                function( e ) 
                {
                    $( this ).html( 'Hide' );
                    $( this ).next( 'pre' ).toggle();
                },
                function()
                {
                    $( this ).html( 'Show' );
                    $( this ).next( 'pre' ).toggle();
                }
            );
        } );
    } );
} );

Answer 1

你可以：

jQuery( document ).ready( function($)
{
    $('#my-help-tab:not(.hidden) > .targeted > a').on( 'click', function( e )
    {
        event.preventDefault();
        $( this ).children( '.show-hide' ).on( 'click', function( e )
        {
            $( this ).toggle(
                function( e ) 
                {
                    $( this ).html( 'Hide' );
                    $( this ).next( 'pre' ).toggle();
                },
                function()
                {
                    $( this ).html( 'Show' );
                    $( this ).next( 'pre' ).toggle();
                }
            );
        } );
    } );
} );

或者：

$('#help:not(.hidden) .targeted > a')

或（但可能没必要）：

$('#help:not(.hidden) > #my-help-tab:not(.hidden) > .targeted > a')

没有课程的另一种方法：

$('#my-help-tab:visible > .targeted > a')

您应该阅读这些文件：

阅读this answer以获取有关后代与子选择器的更多说明。

元素没有附加类时的事件处理程序

1 个答案: