0

jQ Mobile アプリでの単純な slideToggle - 正しくフィルタリングできません。

<h4 class="trigger">Title 1<span> [ + ]</span>
<div class="formGroup">
 //form stuff
</div>

<h4 class="trigger">Title 2<span> [ + ]</span>
<div class="formGroup">
 //form stuff
</div>

このようなグループは約 16 ありますが、そのアイデアはわかります。.formGroup は CSS の display:none によって隠されています。

次のコードを使用すると、クリックするたびに、ページ上のすべての h4 > span のスパン テキストが変更されます。

$( document ).on( "pageinit", "#personnelPage", function( event ) {
    $('h4.trigger').click(function(){
        $(this).next('.formGroup').slideToggle('fast', function(){
            $('h4.trigger').find('span').text($(this).is(':visible') ? '[ - ]' : '[ + ]');
        });

    });
});

どうも

4

1 に答える 1

1

クリックした要素をターゲットにしたいと思いますh4。その場合、変数を使用してそのオブジェクトへの参照を保持し、それをslideToggleコールバックで使用できます

$(document).on("pageinit", "#personnelPage", function (event) {
    $('h4.trigger').click(function () {
        var $this = $(this)
        $this.next('.formGroup').slideToggle('fast', function () {
            $this.find('span').text($(this).is(':visible') ? '[ - ]' : '[ + ]');
        });

    });
});
于 2013-09-04T03:12:36.157 に答える