jquery - 如何仅定位嵌套标签，而不是所有其他标签

Question

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 的 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') ? '[ - ]' : '[ + ]');
        });

    });
});

谢谢

Answer 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') ? '[ - ]' : '[ + ]');
        });

    });
});