实现如下功能:
根据客户选择下拉框,同步中部分超链的请求传递参数与下拉框中的值相等。
代码中用到jquery的cookie插件:
jquery.cookie.js
jquery.cookie.pack.js
1、页面部分
假设页面有一个用于标识状态的select。
<select id="type">
<option value="sms">短信</option>
<option value="mms">彩信</option>
......
</select>
并且有一些需要同步的链接,为了方便JQuery查找遍历这些链接,所以为他们统一命名为nav。
同时将访问链接的个性化部分记录在class中方便JQuery读取生成新的url。如下:
<a name="nav" href="#" class="action1.do">urlName1</a>
<a name="nav" href="#" class="action2.do">urlName2</a>
......
<a name="nav" href="#" class="action9.do">urlName9</a>
2、JS代码部分
在客户第一次使用没有cookie记录时,设置默认值:
if($.cookie('_type)== null) $.cookie('_type, 'sms');
遍历修改URL的函数,同时为了可以在其他地方操作该函数,需要为创建一个句柄:
var updateUrl = function(){
$("a[name='nav']").each(function(){ //遍历所有name为nav的连接
this.href = '/' + $(this).attr("class") + '.do?type=' + $.cookie('_type');
});
}
将cookie的值与select的默认选择项同步:
$("#type").val($.cookie('_ype'));
JQuery在调用它的一些函数后仍然返回当前的对象,因此可以继续添加onChange事件:
$("#type").val($.cookie('_type')).change(function(){
$.cookie('_type', $(this).val()); //将选择的值存入cookie中
updateUrl (); //更新url
});
完整代码如下:
复制代码 代码示例:
<script>
/**
* 遍历修改url请求参数
* Edit www.jb200.com
*/
$(document).ready(function(){
if($.cookie('_type')== null) $.cookie('_type', 'sms');
updateUrl();
$("#type").val($.cookie('_type')).change(function(){
$.cookie('_type', $(this).val());
updateUrl();
});
});
var updateUrl= function(){
$("a[name='nav']").each(function(){
this.href = '/' + $(this).attr("class") + '.do?type'=' + $.cookie('_type');
});
}
</script>