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

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

您需要从 class 属性中的类名中删除点，如下所示：

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

Answer 2

我认为你发布这个问题而不重新检查它。请再次查看您的问题。可能是您可以提供有关您尝试过的更多数据。

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

首先使用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>

我认为这很简单。 :)有很好的编码！

如何在ajax加载的数据上隐藏和显示contnet？

2 个答案: