0

我有一个可以单击的按钮，我希望 fancybox 加载任何需要的内容，具体取决于我可以检查的一些复选框。这些复选框将更改需要在花式框内的 iframe 中显示的 url 的值。

到目前为止，我可以让它工作一次，当我再次更改复选框时，我会看到 html 上的 url 发生变化，但fancybox 根本不会弹出。

这是我的按钮和fancybox的链接：

<button type="button" title="Compare" class="button">Compare</button>
<a class="comparefancy" style="display:none;" href="#"></a>

这是我单击按钮时发生的情况：

jQuery(document).ready(function() {
        jQuery('.button').click(function(){

            var i=0;
            var prdString="";

            var prdString = jQuery.map(jQuery(':checkbox:checked'), function(n, i){
                  return n.value;
            }).join(',');

            var url='<?php echo Mage::getUrl('catalog/product_compare/index').'items/'; ?>'+ prdString + '/uenc/';

            jQuery('.comparefancy').attr('href', url);//this works all the time
            jQuery('.comparefancy').fancybox();  //this will only work the first time
            jQuery('.comparefancy').trigger('click');



    });

});

我已经尝试过提示一些类似答案的 beforeLoad 方法，但它对我不起作用。

编辑：在对此进行更多测试后，我从链接中删除了 display none 并使其可见，然后执行以下操作：

  1. 检查我的复选框，然后单击按钮：第一个 fancybox 加载就好了
  2. 检查其他复选框，然后单击按钮：链接将更改其href，但花式不会加载。
  3. 手动点击链接，然后fancybox加载新的url

那么问题是我的触发点击功能呢？什么？

4

2 回答 2

1

也许你实际上并不需要

<a class="comparefancy" style="display:none;" href="#"></a>

但尝试手动触发fancybox，例如：

jQuery(document).ready(function () {
    var i = 0; // inside the click will be always 0 ... to be or not to be
    jQuery('.button').click(function () {
        var prdString = jQuery.map(jQuery(':checkbox:checked'), function (n, i) {
            return n.value;
        }).join(',');
        var url = '<?php echo Mage::getUrl(' catalog / product_compare / index ').' items / '; ?>' + prdString + '/uenc/';

        // open the corresponding URL in fancybox
        jQuery.fancybox(url, {
            // API options
            padding: 0 // example
        });

    });
});

我只是建议fancybox部分（虽然将i变量移出click）。确保使用通过该方法传递的参数url检查每个检查的预期值。checkbox.map()

于 2013-04-25T16:25:28.107 回答
0

不要一次又一次地绑定fancybox函数，一次就够了：

(function($) {
    $(function() { // short for $(document).ready();
        $('.button').click(function() {
            var i = 0,
                prdString = $.map($(':checkbox:checked'), function(n, i){
                    return n.value;
                }).join(','),
                url = '<?php echo Mage::getUrl('catalog/product_compare/index').'items/'; ?>'+ prdString + '/uenc/';

                $('.comparefancy').attr('href', url);
                setTimeout(function() {
                    $('.comparefancy').click();
                }, 50);
        });

        $('.comparefancy').fancybox({
            // optional settings
        });
    });
})(jQuery);
于 2013-04-25T09:25:35.597 回答