javascript - 优化 colorbox 并添加额外的 jquery

Question

我有两个问题

1. 我正在尝试打开 jQuery 颜色框，但速度非常慢。原因是我试图从不同的页面获取 html 内容(我无法使用 iframe，因为我只需要此页面的一部分)。以下代码有效，但单击按钮后需要一些时间:

   $(document).ready(function() {
       $(".cart-link a").click(function(event) {
           $(this).colorbox.close();
       });
   
   
       $(".rest-menuitem a").click(function(event) {
           event.preventDefault();
           var result = null;
           var sURL = $(this).attr("href");
           $.colorbox({
               html: function() {
                   $.ajax({
                       url: sURL,
                       type: 'get',
                       dataType: 'html',
                       async: false,
                       success: function(data) {
                           result = data;
                       }
                   });
                   return $(result).find('.product');
               },
               width: '650px',
               height: '10px',
               onComplete: function() {
                   $(this).colorbox.resize();
               }
           });
   
       });
   
   });
   

   我想知道是否有其他方法可以做到这一点。我不介意是否弹出颜色框然后需要时间来加载内容。上述版本可以在此网址( http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products )找到。

2. 当用户单击“添加到购物车”时，我还尝试关闭颜色框。但由于某种原因它没有被触发。当我点击“添加到购物车”时，不会触发 $(".cart-link a").click 。有没有特殊的方法将 jquery 添加到 colorbox 内容？

Answer 1

试试这个:

$(".rest-menuitem a").colorbox({
    href: function(){ 
        return $(this).attr('href') + ' .products';
    },
    width: '650px',
    height: '10px',
    onComplete: function() {
        $(this).colorbox.resize();
    }
});

ColorBox 使用 jQuery 的 load() 方法进行 ajax 处理，因此您只需将所需的选择器添加到链接的 href 中即可。