jQuery，在toggle上更改点击元素的文本就是更改下一个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.

Javascript

$( 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 )' );
        }
    });
});

如果我在toggle函数中发出警报，看到"$(this(.html(("，我会得到"(hide("，所以我认为将$(this(的html更改为"(隐藏("将变为"(显示("，但它将ARTICLE DIV的内容改为"(显示("。

示例：

$( this ).closest( 'div' ).next( '.myContent' ).slideToggle( function() {
    alert ( $( this ).html() );
});

Thx。

Answer 1

我明白了，问题是你在一行中链接东西，这意味着最后一个元素是('.myContent'(，而在函数$(this(==('.myContent'(

如果你想更改span文本，你必须将span分配给一个变量，对该变量执行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演示

Answer 2

在幻灯片内部切换回调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 )' );
        }
    });
});

Fiddle here