0

我正在尝试为我的网站构建一个后台更改器，它工作正常，除了当您移动到不同的页面时更改会丢失。

当您更改页面但没有快乐时，我尝试了几种方法来使更改坚持下去。

这是带有一些测试图像的 jQuery：

$(function() {
$(".bgCollection").change(function() {
    if ($("#wood").is(":checked")) {
        $('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
    }
    if ($("#steel").is(":checked")) {
        $('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
    }
    if ($("#metal").is(":checked")) {
        $('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
    }
}); });

这是html：

<input name="BG" id="wood" type="radio" value="" class="bgCollection" />
<label for="radio">
  Wood
</label>
<input name="BG" id="steel" type="radio"  class="bgCollection"/>
<label for="radio">
  Steel
</label>
<input name="BG" id="metal" type="radio" value="" class="bgCollection"/>
<label for="radio">
  Black metal
</label>

我试图将当前的 src 值传递给一个变量，并让脚本在页面加载时设置它，但无法让它工作。

任何帮助都会很棒。谢谢，亚伦。

4

2 回答 2

0

您可以使用 jquery-cookie 脚本设置 cookie 来跟踪更改：https ://github.com/carhartl/jquery-cookie

javascript:

$(function() {

    // get cookie
    var background = $.cookie('background');

    // update background
    changeBackground(background);

});

function saveBackground(background) {

    // set cookie
    $.cookie('background', background);

    // change background
    changeBackground(background);

}

// background changer
function changeBackground(background) {

    switch (background) {

        case "steel":
            $('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
            break;

        case "metal":
            $('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
            break;

        case "wood":
        default:
            $('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
            break;
    }
}

html:

<input id="wood" type="radio" value="" onclick="saveBackground('wood');" />
    <label for="radio">  Wood</label>

<input id="steel" type="radio" onclick="saveBackground('wood');"/>
    <label for="radio">  Steel</label>

<input id="metal" type="radio" onclick="saveBackground('wood');"/>
    <label for="radio">  Black metal</label>
于 2013-02-22T10:22:52.413 回答
0

新代码如下所示：

    $('<div id="bg_swapper"><div id="one" class="bgCollection"><p class="ocr">Swap Background</p></div><div id="two" class="bgCollection"><p class="ocr">Swap Background</p></div><div id="three" class="bgCollection"><p class="ocr">Swap Background</p></div></div>').insertBefore('.vines_left_top');

$('#bg_swapper p').hide();

 $('#one, #two, #three').mouseover(function() {
     $(this).stop(true).animate({width: '230px'}, 300);
     $(this).children('p').show().css('text-indent','0px');
 });
  $('#one, #two, #three').mouseout(function() {
     $(this).stop(true).animate({width: '20px'}, 300);
    $(this).children('p').hide().css('text-indent','999px');
 });

$('#one').click(function(e) { 
$('#background img:first').attr('src', 'http://cdnimg.visualizeus.com/thumbs/7f/78/gfx,wood-7f78592c9a6ed3390492c560c5ac6fec_h.jpg');
});
$('#two').click(function(e) { 
$('#background img:first').attr('src', 'http://www.aroorsteelcorporation.com/full-images/stainless-steel-834007.jpg');
});
$('#three').click(function(e) { 
$('#background img:first').attr('src', 'http://i00.i.aliimg.com/photo/v0/468538622/Brushed_metal_texture_prepainted_metal.jpg');
});

它使用动画 div 和 mouseover/out 功能而不是单选按钮。

如何将 cookie 功能与这种新方法联系起来？

谢谢，亚伦。

于 2013-03-11T12:44:32.837 回答