Question

我正在开发一个样式转换器/切换器，它可以改变主题“body”的背景图案。我成功地实现了我的模板，但是这里出现了悲伤的部分。

我已经将jQuery中的属性更改为css属性，因为“background-image”适用于所有浏览器。在这里：http://jsfiddle.net/envira/xs73J/9/

    jQuery(document).ready(function($) {
    $('.backgrounds li').click(function(){
    $colbgSrc = $(this).css('background-image');
    if ($(this).attr('class') == 'bgnone')
        $colbgSrc = "none";
    $('body').css('background-image',$colbgSrc);
    $.cookie('background', $colbgSrc);
    $.cookie('backgroundclass', $(this).attr('class').replace('active',''));
    $(this).addClass('active').siblings().removeClass('active');
});     
 $(function(){
    $colbgSrc = $.cookie('background');
    $('body').css('background-image',$colbgSrc);
    $('.backgrounds').find('li.' + $.cookie('backgroundclass')).addClass('active');
        });
    });

但是当我将jQuery代码中的CSS属性类更改为“background”时，Firefox和IE中出现错误，因为背景不可点击。这一个：http://jsfiddle.net/xs73J/5/

    jQuery(document).ready(function($) {
    $('.backgrounds li').click(function(){
    $colbgSrc = $(this).css('background');
    if ($(this).attr('class') == 'bgnone')
        $colbgSrc = "none";
    $('body').css('background',$colbgSrc);
    $.cookie('background', $colbgSrc);
    $.cookie('backgroundclass', $(this).attr('class').replace('active',''));
    $(this).addClass('active').siblings().removeClass('active');
});     
 $(function(){
    $colbgSrc = $.cookie('background');
    $('body').css('background',$colbgSrc);
    $('.backgrounds').find('li.' + $.cookie('backgroundclass')).addClass('active');
});
    });

我尝试编辑css值，但没有一个证明是成功的。所以我希望我能找到一个可以解决我的问题的人。

这个的唯一原因是我希望重复模式，点击时不要重复较大的图像。

感谢帮助，谢谢问候

Answer 1

使用jQuery函数background设置.ccs()似乎是Firefox中的错误（请参阅LINK），建议您坚持使用background-image。

正如您所说，您打算重复模式图像而不是重复图像，我建议您使用以下方法，我已经在Firefox和IE（以及Chrome）中测试过：

DEMO

HTML

将包含较大图片列表的div元素的类别从patterns更改为images

JS

添加附加逻辑以确定点击的图像是.click事件中的图案还是封面图片：

jQuery(document).ready(function($) {
$('.backgrounds li').click(function(){
        $colbgSrc = $(this).css('background-image');
        if ($(this).attr('class') == 'bgnone')
            $colbgSrc = "none";
        $('body').css('background-image',$colbgSrc);
        /* Additional logic starts here */
        if ($(this).parents("div.images").length) {
            $('body').css('background-repeat','no-repeat');
            $('body').css('background-size', '100%');
        } else {
            $('body').css('background-repeat','repeat');   
            $('body').css('background-size', '');
        }
        /* Additional logic ends here */
        $.cookie('background', $colbgSrc);
        $.cookie('backgroundclass', $(this).attr('class').replace('active',''));
        $(this).addClass('active').siblings().removeClass('active');
    });     
     $(function(){
        $colbgSrc = $.cookie('background');
        $('body').css('background-image',$colbgSrc);
        $('.backgrounds').find('li.' + $.cookie('backgroundclass')).addClass('active');
    });
});

在Firefox和IE中点击后台无法加载

1 个答案:

HTML

JS