Question

我想在单击某个人时弹出一个模式对话框。

我正在将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

预先感谢您的帮助！

Answer 1

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

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

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

1 个答案: