Question

我正在创建一个网站，这将允许用户选择多种颜色方案（对于色盲），但也必须是可缩放的。由于图像必须缩放，除了将所有图像保留在页面上之外我无其他操作（无法控制IE8以下的背景图像尺寸）。

这使我得到了这个代码，它为CURRENT页面上的所有图像添加了前缀

$(function() {
    $('img.swap').each(function(){     
    $(this).data('current_image', this.src);     
}) 
$('a').click(function(){          
        var prefix = $(this).attr("class");       
         $('img.swap').each(       
         function() {           
            if($(this).data('prefix') != prefix){            
            this.src = $(this).data('current_image').replace('.gif', (prefix)+'.gif');
            $(this).data('prefix', prefix)          
    }         
     else {            
     this.src = $(this).data('current_image');           
      $(this).data('prefix', '')          
      }       
       });  
      }); 
 });

问题出现在用户点击链接时，新页面将不记得图像需要的前缀（颜色方案）。

问题是，无论如何都要这样做，所以一旦你点击某种颜色它会在整个网站上记住它吗？如果没有，那么无论如何都要在ie9之前控制CSS背景图像大小？

非常感谢

约翰

Answer 1

假设您想要在客户端执行所有操作，请将颜色方案值存储在查询字符串中：

    var _colorScheme;

    function getQueryStringParam(paramName) {
        queryString = window.location.search.substring(1);
        queryStringParams = queryString.split("&");

        for(i=0;i<queryStringParams.length;i++) {
             param = queryStringParams[i].split("=");
             if (param[0] == paramName)
                   return param[1];
        }
    }

    $(document).ready(function() {
        _colorScheme = getQueryStringParam("color");
    });


$('a').click(function(){          
        var prefix = $(this).attr("class");   

         $('img.swap').each(       
         function() {           
            if($(this).data('prefix') != prefix){            
            this.src = $(this).data('current_image').replace('.gif', (prefix)+'.gif');
            $(this).data('prefix', prefix);

            // remember the new color scheme
            _colorScheme = prefix;
    }         
     else {            
     this.src = $(this).data('current_image');           
      $(this).data('prefix', '')          
      }       
       });  
      }); 

         // attach querystring to link's href attribute so that it is passed to the next page
        var href = $(this).attr('href');
        $(this).attr('href', href + '?color=' + prefix);
 });

现在您已将_colorScheme设置为文档就绪，您可以使用它来设置图像前缀。同时，您需要使用jquery来选择每个链接并将查询字符串附加到其href标记。例如，<a href="page.html">将变为<a href="page.html?color=red">。

更好的选择是将颜色方案存储在Session变量中，这可以通过php，asp或.net中的服务器端脚本来实现。

在Click上交换图像

1 个答案: