我有一个按钮,我点击,我希望fancybox加载任何内容需要取决于一些复选框,我可以检查。这些复选框将改变需要在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,并使其可见,然后做了以下操作:- 选中我的复选框,然后点击按钮:第一个花哨的盒子加载得很好
- 选中其他复选框,然后点击按钮:链接将改变它的href,但花式不会加载。
- 手动点击链接,然后fancybox加载新的url
那么问题是我的触发点击功能?wtf ?
也许你实际上并不需要
<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
)。确保通过.map()
方法传递的参数为每个检查的checkbox
获得预期的url
值。
不要一次又一次地绑定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);