How to make cart popup unique using ID so it wont affect other cart-popup?

huangapple
go评论62阅读模式
英文:

How to make cart popup unique using ID so it wont affect other cart-popup?

问题

以下是翻译好的部分：

我有3个购物车弹出窗口，到目前为止我已经创建了2个，但问题是它们都会在我点击“查看详情”之前出现。我尝试使每个弹出窗口都独立于其他的，但仍然不能满足我的需求。我的要求是，当我首次点击它们中的每一个时，它们必须单独弹出。让我分享一下我的逻辑。

// HTML 代码

（略）

// jQuery

$(document).ready(function() {
  // 为“查看详情”按钮设置点击监听器
  $('.view-details-btn').on('click', function(e) {
    e.preventDefault(); // 阻止链接的默认行为
    // 获取点击项的索引
    var index = $(this).attr('id').split('-')[1];
    // 显示相应的弹出窗口
    $('#cart-popup-' + index).show();
  });

  // 为关闭按钮设置点击监听器
  $('.close-popup-btn').on('click', function() {
    // 隐藏弹出窗口
    $(this).closest('.card-popup-container').hide();
  });
});

上述代码目前会在用户点击“查看详情”之前显示弹出窗口，这是不正确的。在任何用户查看它们作为购物车弹出窗口之前，它们必须首先隐藏起来。我使用的代码不符合我的要求，需要根据给定的代码来改进我的逻辑。

英文:

I have 3 cart popup, i have created 2 so far but the problem is they both appear before i clicked view-detail. I have tried to have each unique to the popup, but i am still not achieving this as my requirement. The requirement when i first click each of these they must popup on their own. Let me share my logic below.

// html code
`

                            <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">×</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">×</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();
  });
});`

The above code is currently making them to appear before user click view-detail, which is wrong. The must first hide before any user view them as cart-popup. The code i use is not working as per my requirement and need some help based on the given code to improve my logic.

答案1

得分: 0

你需要首先通过添加CSS属性来隐藏你的购物车：

display: none;

或者

visibility: hidden;

然后，在父按钮上点击后移除它。

这里有一个在jsfiddle上的可工作示例或代码片段。

英文:

You need to first hide your carts by adding a css property to

 display: none;

or

 visibility: hidden;

Then remove it on click on the parent button.

Here's a working sample on jsfiddle or snippet.

Please note that I've modified your HTML for the carts as well as for the products, to make sure they're unique with unique ID and price/description so there's no conflict.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {

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

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

}); // end document ready

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;


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

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

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月8日 02:28:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76195631.html
  • bootstrap-4
  • html
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定