javascript - 如何在 ajax 加载的数据上隐藏和显示内容？

Question

我正在尝试显示和隐藏使用 Ajax 加载的数据。

$.ajax({
    type: "POST",
    url: "/swip.php",
    data: {pid:sldnxtpst,sldnu:sldnu},
    success: function(result) {
       $('.swip').prepend(result);
    }
});

当用户滚动到底部时加载此数据。

<div>Loaded data on document ready</div>
<div>Loaded data on ajax </div>
<div>Loaded data on ajax </div>
<div>Loaded data on ajax </div>

我想在点击时隐藏和显示的数据:

<div class=".comment-box<?php echo $sldnu; ?>"> display / Hide </div>
<div class=".comntbxfrm<?php echo $sldnu; ?>">Content </div>

点击显示/隐藏 div 我想切换，comntbxfrm div。它只是不适用于此脚本。

<script>
    $(document).ready(function(){
    var cmnbxnu = <?php echo $sldnu; ?>;
        $('.comment-box'+cmnbxnu).each(function () {
        $(document).on('click','comment-box', function(){
            alert(cmnbxnu);
            $('.comntbxfrm'+cmnbxnu).toggle();
        });
        });
    });
</script>

这让我很困惑。我应该如何显示和隐藏 Ajax 加载数据上的 div。

Answer 1

我认为你发布这个问题时没有重新检查它。请再看看你的问题。也许您可以提供更多有关您尝试过的数据。

也许这个逻辑可以解决你的问题。

• 首先使用 jQuery 或 JavaScript 检查 div 是否可见。 (引用:jQuery event to trigger action when a div is made visible)
• 如果 div 可见，则更改或添加类 swip-active。
• 然后使用 SCRIPT 01。
• 确保swip-active类在一页中只使用一次

你的代码结构需要是这样的:

<div class="swip">Loaded data on document ready</div>
<div class="swip">Loaded data on ajax </div>
<div class="swip-active">Loaded data on ajax </div>
<div class="swip">Loaded data on ajax </div>

脚本 01:

     <script>
        $(document).ready(function(){
            $(document).on('click','.swip-active .comment-box', function(){
                $('.swip-active .comntbxfrm').toggle();
            });
        });
    </script>

我想这很简单。 :) 编码很棒!