选择单击项目的子项（同一页面上的多个副本）

debugcn 发表于 Dev

CUbuffsFTW

我想在点击一个人时弹出一个模式。

我正在将 wordpress 上的 CPT 输出到网格中。这意味着每个人的输出代码是相同的。我希望能够点击每一个并弹出那个人的模式。

目前我有 jquery，当你点击一个时，它会弹出所有的模态而不是一个。

jQuery(document).ready(function () {

    $(‘.staffphoto').click(function(){
        $(‘.staffmodal').css('display', 'block');
    });

    $(‘.close').click(function(){
        $(‘.staffmodal').css('display', 'none');
    });
});

这是 HTML：

<div class="wrapcenter staff">
    <div class="staffphoto" data-id="[wpbb post:id]">[wpbb post:featured_image size="large" display="tag" linked="no"]</div>
    <h3 class="staffname">[wpbb post:title]</h3>
    <p class="stafftitle">[wpbb post:pods_display field='job_title']</p>


    <!-- The Modal -->
    <div id="staffmodal" class="staffmodal" data-id="[wpbb post:id]">

      <!-- Modal content -->
      <div class="staff-modal-content">
        <span class="close">&times;</span>
        <div class="staffwrapper">
            [wpbb post:featured_image size="large" display="tag" linked="yes"]
            <div class="staffinfomodal">
                <h3 class="staffnamemodal">[wpbb post:title]</h3>
                <p class="stafftitlemodal">[wpbb post:pods_display field='job_title']</p>
                <p class="staffbio">[wpbb post:pods_display field='bio']</p>
            </div>
        </div>
      </div>

    </div>
</div>

所以总而言之，我需要能够只显示某人点击的照片的模式。这是我正在尝试的测试页面：https : //pyledigital.com/test-staff

先谢谢您的帮助！

米希尔·本德

$('.staffphoto').click(function(){
    var parent = $(this).closest('.wrapcenter.staff');
    $('.staffmodal[data-id]', parent).show();
});

$('.close').click(function(){
    $(this).closest('.staffmodal').hide();
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。