jquery 如何使用ID使购物车弹出窗口唯一，以便不会影响其他购物车弹出窗口？

gopyfrb3 于 2023-05-17 发布在 jQuery

关注(0)|答案(1)|浏览(90)

我有3购物车弹出，我已经创建了2到目前为止，但问题是他们都出现在我点击查看详细信息。我已经尝试了每一个独特的弹出窗口，但我仍然没有实现这一点，因为我的要求。当我第一次点击这些要求，他们必须自己弹出。下面让我分享一下我的逻辑。
// html代码`

<div class="col-lg-4 col-md-6 col-sm-12 pb-1">
    <div class="card product-item border-0 mb-4">
        <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
            <img class="img-fluid w-100" src="img/product-1.jpg" alt="">
        </div>
        <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
            <h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
            <div class="d-flex justify-content-center">
                <h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between bg-light border">
            <a href="#" class="btn btn-sm text-dark p-0 view-details-btn" id="cart-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
            <a href="#" class="btn btn-sm text-dark p-0 add-to-cart-btn"><i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
        </div>
    </div>
    <!--View item details-->
    <div class="card-popup-container">
        <div class="card-popup" id="cart-popup-0">
            <button class="close-popup-btn">&times;</button>
            <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                <img class="img-fluid w-100" src="img/product-1.jpg" alt="">
            </div>
            <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                <h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
                <div class="d-flex justify-content-center">
                    <h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="#" class="btn btn-primary add-to-cart-btn">Add to Cart</a>
                <button class="close-popup-btn btn btn-secondary">Close</button>
            </div>
        </div>
    </div>
    <!---View details ends here-->
</div>

                    <div class="col-lg-4 col-md-6 col-sm-12 pb-1">
                        <div class="card product-item border-0 mb-4">
                            <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                                <img class="img-fluid w-100" src="img/product-2.jpg" alt="">
                            </div>
                            <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                                <h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
                                <div class="d-flex justify-content-center">
                                    <h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
                                </div>
                            </div>
                            <div class="card-footer d-flex justify-content-between bg-light border">
                                <a href="" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
                                <a href="" class="btn btn-sm text-dark p-0"><i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
                            </div>
                        </div>
                    </div>

                <!----View details starts here--->

                <div class="card-popup-container">
        <div class="card-popup" id="popup-1">
            <button class="close-popup-btn">&times;</button>
            <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                <img class="img-fluid w-100" src="img/product-2.jpg" alt="">
            </div>
            <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                <h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
                <div class="d-flex justify-content-center">
                    <h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="#" class="btn btn-primary add-to-cart-btn">Add to Cart</a>
                <button class="close-popup-btn btn btn-secondary">Close</button>
            </div>
        </div>
    </div>

                <!--View details ends here-->`

// jquery

`$(document).ready(function() {
  // Set up click listener for view details button
  $('.view-details-btn').on('click', function(e) {
    e.preventDefault(); // prevent default behavior of the link
    // Get the index of the clicked item
    var index = $(this).attr('id').split('-')[1];
    // Show the corresponding popup
    $('#cart-popup-' + index).show();
  });

  // Set up click listener for close button
  $('.close-popup-btn').on('click', function() {
    // Hide the popup
    $(this).closest('.card-popup-container').hide();
  });
});`

上面的代码目前使它们在用户单击view-detail之前出现，这是错误的。在任何用户将其作为购物车弹出窗口查看之前，必须首先隐藏。我使用的代码是不是按照我的要求工作，需要一些帮助的基础上给定的代码，以改善我的逻辑。

jquery

来源：https://stackoverflow.com/questions/76195631/how-to-make-cart-popup-unique-using-id-so-it-wont-affect-other-cart-popup

1条答案

按热度按时间

xiozqbni1#

您需要先通过添加css属性来隐藏您的购物车

display: none;

或

visibility: hidden;

然后在单击父按钮时将其删除。
下面是一个working sample on jsfiddle或片段。
请注意，我已经修改了您的购物车和产品的HTML，以确保它们具有唯一的ID和价格/描述，因此没有冲突。

$(document).ready(function() {

  // Set up click listener for view details button
  $('.view-details-btn').on('click', function(e) {
    e.preventDefault(); // prevent default behavior of the link
    // Get the index of the clicked item
    var index = $(this).attr('id').split('-')[1]; //alert(index);
    // Show the corresponding popup
    //$('.card-popup-container').show();
    $('#cart-popup-' + index).show();
  });

  // Set up click listener for close button
  $('.close-popup-btn').on('click', function() {
    // Hide the popup
    $(this).closest('.card-popup-container').hide();
  });

}); // end document ready

.card-popup-container, #cart-popup-1, #cart-popup-2 {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>

<!----View details starts here #0--->
    <div class="card-popup-container" id="cart-popup-0">
        <div class="card-popup">
            <button class="close-popup-btn">&times;</button>
            <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                <img class="img-fluid w-100" src="img/product-2.jpg" alt="">
            </div>
            <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                <h6 class="text-truncate mb-3">Colorful Stylish Shirt 0</h6>
                <div class="d-flex justify-content-center">
                    <h6>R120.00</h6><h6 class="text-muted ml-2"><del>R120.00</del></h6>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="#" class="btn btn-primary add-to-cart-btn">Add to Cart</a>
                <button class="close-popup-btn btn btn-secondary">Close</button>
            </div>
        </div>
    </div>
<!--View details ends here #0 -->
    
<!--View item details #1-->
    <div class="card-popup-container" id="cart-popup-1">
        <div class="card-popup">
            <button class="close-popup-btn">&times;</button>
            <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                <img class="img-fluid w-100" src="img/product-1.jpg" alt="">
            </div>
            <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                <h6 class="text-truncate mb-3">Colorful Stylish Shirt 1</h6>
                <div class="d-flex justify-content-center">
                    <h6>R121.00</h6><h6 class="text-muted ml-2"><del>R121.00</del></h6>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="#" class="btn btn-primary add-to-cart-btn">Add to Cart</a>
                <button class="close-popup-btn btn btn-secondary">Close</button>
            </div>
        </div>
    </div>
<!---View details ends here #1-->

<div class="col-lg-4 col-md-6 col-sm-12 pb-1">
    <div class="card product-item border-0 mb-4">
        <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
            <img class="img-fluid w-100" src="img/product-1.jpg" alt="">
        </div>
        <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
            <h6 class="text-truncate mb-3">Colorful Stylish Shirt 0</h6>
            <div class="d-flex justify-content-center">
                <h6>R120.00</h6><h6 class="text-muted ml-2"><del>R120.00</del></h6>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between bg-light border">
            <a href="#" class="btn btn-sm text-dark p-0 view-details-btn" id="cart-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
            <a href="#" class="btn btn-sm text-dark p-0 add-to-cart-btn"><i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
        </div>
    </div>
</div>

<div class="col-lg-4 col-md-6 col-sm-12 pb-1">
    <div class="card product-item border-0 mb-4">
        <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
            <img class="img-fluid w-100" src="img/product-2.jpg" alt="">
        </div>
        <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
            <h6 class="text-truncate mb-3">Colorful Stylish Shirt 1</h6>
                <div class="d-flex justify-content-center">
                    <h6>R121.00</h6><h6 class="text-muted ml-2"><del>R121.00</del></h6>
                </div>
        </div>
        <div class="card-footer d-flex justify-content-between bg-light border">
            <a href="" class="btn btn-sm text-dark p-0 view-details-btn" id="cart-1"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
            <a href="" class="btn btn-sm text-dark p-0"><i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-05-17

我来回答

jquery 如何使用ID使购物车弹出窗口唯一，以便不会影响其他购物车弹出窗口？

1条答案

相关问题

热门标签

最新问答