显示和隐藏带有 ajax 内容的 div答案

【问题标题】：Show and hide div with ajax content显示和隐藏带有 ajax 内容的 div
【发布时间】：2022-01-22 08:02:43
【问题描述】：

我有这个代码：

<div id="product_<?php echo $product->id; ?>"></div>

这是ajax js代码：

$(function () {
    $('.expand').on('click', function (e) {
        e.preventDefault();

        var token = "<?php echo $this->security->get_csrf_token_name(); ?>";
        var hash = "<?php echo $this->security->get_csrf_hash(); ?>";
        var productID = $(this).data("id");

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: 'marketplaces/marketplaces/test_expand',
            data: {
                product_id: productID,
                token: hash
            },
            beforeSend: function () {

            },
            success: function (data, textStatus) {

                $("#product_" + productID).html(data);

            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {},
        });
    });
});

还有这个按钮：

<div data-id="<?php echo $product->id; ?>" class="expand">
    <a href="#" class="bt btn-primary btn-sm">Offers
        <i class="fas fa-chevron-down"></i>
    </a>
</div>

当我单击带有id=product_(ID) 的按钮 div 时，它会显示来自 ajax 的数据。它正在工作！当我再次点击按钮时，我想隐藏这个 div！

怎么可能？谢谢！

【问题讨论】：

可以加$("#product_"+productID).hide();在 $.ajax 之前，您可以添加 $("#product_"+productID).show();在阿贾克斯成功
我试过了，但没用。当我按下按钮时，它会显示给我，但是当我再次按下 div 时会同时隐藏和显示！
请检查我在答案中添加的完整代码。

标签： javascript jquery ajax

【解决方案1】：

你应该在打开元素的时候给它添加一个类

$("#product_" + productID).addClass('is-open')

然后在第二次点击时检查它是否有类（在 ajax 调用之上）

if ($("#product_" + productID).hasClass('is-open')) {
  $("#product_" + productID).hide().removeClass('is-open')
  return
}

如果你想在打开一个之前关闭所有，那么它是微不足道的：

$('.is-open').hide().removeClass('is-open')

【讨论】：

【解决方案2】：

您可以使用自定义代码为显示隐藏功能添加条件。

这里是示例代码：

           $(function () {
        
        $('.expand').on('click', function (e) {
            
            e.preventDefault();
            var currBoxObj = this;
            var token="<?php echo $this->security->get_csrf_token_name(); ?>";
            var hash="<?php echo $this->security->get_csrf_hash(); ?>";
            
            var productID = $(this).data("id");
            if(!$(currBoxObj).hasClass("showingblock")){
            
                    $.ajax({
                        type: 'GET',
                        dataType: 'html',
                        url: 'marketplaces/marketplaces/test_expand',
                        data: 
                    {
                        product_id: productID,
                        token: hash             
                    },
                        beforeSend: function () {
                            
                        },
                        success: function (data, textStatus) {
                            $(currBoxObj).addClass("showingblock");
                            $("#product_"+productID).show();
                            $("#product_"+productID).html(data);
                
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert('request failed');
                        },
                        complete: function () {
                        },
                    });
            }else{
                $("#product_"+productID).hide();
                $(currBoxObj).removeClass("showingblock");
            }
        });
    });

【讨论】：

正是我需要的！谢谢！
更新了代码，现在它适用于所有产品。
是的，干得好！

【解决方案3】：

$('[data-id=product_ID]').hide();

我认为你可以使用这样的代码。希望对你有所帮助。

【讨论】：