jQuery，更改切換元素的元素將更改下一個div

Question

我要顯示一系列文章，但想讓用戶隱藏/顯示，因此他們不必滾動太多...

我有HTML

<div class="article-header" >Article 1 - Thursday Sept 13, 8:30pm <span class="toggleMe" >( hide )</span></div>
<div class="myContent" >...the content...</div>

<div class="article-header" >Article 2 - Thursday Sept 15, 6:30pm <span class="toggleMe" >( hide )</span></div>
<div class="myContent" >...the content...</div>

ETC.

Java腳本

$( document ).on( 'click', '.toggleMe' , function( event ) {

    event.preventDefault();
    $( this ).closest( 'div' ).next( '.myContent' ).slideToggle( function() {

        if ( $( this ).html() === '( hide )' ) {

            $( this ).html( '( show )' );

        } else {

            $( this ).html( '( hide )' );

        }

    });

});

如果我在切換功能中發出警報，看到“ $（this）.html（）”，我會得到“（hide）”，因此我假設更改$（this）的html會將“（hide）”更改為“（show）”，但是它將ARTICLE DIV的內容更改為“（show）”。

例：

$( this ).closest( 'div' ).next( '.myContent' ).slideToggle( function() {

    alert ( $( this ).html() );

});

謝謝。

Answer 1

我明白了問題是您正在按順序鏈接事物，這意味着最后一個元素是（'.myContent'） ，在函數$（this）中意味着$（'。myContent'） 。

如果要更改跨度文本，則必須將跨度分配給一個變量，請對該變量執行html（），這是代碼...

$( document ).on( 'click', '.toggleMe' , function( event ) {
    var spanBtn = $(this);
    event.preventDefault();
    $( this ).closest( 'div' ).next( '.myContent' ).slideToggle( function() {
        if ( spanBtn.html() === '( hide )' ) {
            spanBtn.html( '( show )' );
        } else {
            spanBtn.html( '( hide )' );
        }
    });
});

我還附帶了源演示FIDDLE DEMO

Answer 2

在slideToggle回調內部， this是指myContent元素

 $(document).on('click', '.toggleMe', function(event) { event.preventDefault(); var $toggler = $(this); $(this).closest('div').next('.myContent').stop().slideToggle(function() { //here this refers to the `myContent` element not the clicked `toggleMe` //you can also simplify it to $toggler.html(function(i, html) { return html === '( hide )' ? '( show )' : '( hide )'; }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="article-header" >Article 1 - Thursday Sept 13, 8:30pm <span class="toggleMe" >( hide )</span></div> <div class="myContent" >...the content...</div> <div class="article-header" >Article 2 - Thursday Sept 15, 6:30pm <span class="toggleMe" >( hide )</span></div> <div class="myContent" >...the content...</div> 

Answer 3

您正在混合作用域-此代碼有效：

$( document ).on( 'click', '.toggleMe' , function( event ) {
    var self = $(this);
    event.preventDefault();
    $( this ).closest( 'div' ).next( '.myContent' ).slideToggle( function() {

        if ( self.html() === '( hide )' ) {
            self.html( '( show )' );
        } else {
            $( this ).html( '( hide )' );
        }
    });
});

在這里擺弄