写在前面
想实现这样的功能:在前面触发某个对象切换隐藏和显示的功能中,在不刷新网页的情况下,可以动态地切换触发器。原理是有两个单选按钮,提供两个触发器。用户可以选择单选按钮来触发。
目前,可以利用单选按钮来切换,但得依靠刷新网页。
还没找到解决方案。
to be continued…
以后总会有方法的。
代码
<form action="">
<input type="radio" name="trigger" value="button" id="test001">button
<input type="radio" name="trigger" value="#para_2" id="test002">第二段
</form>
var list;
list= $('input:radio:checked').val();
var defaults={
color:"red",
backgroundColor:"black",
trigger:list
};
相比与之前的代码,list先获取单选按钮的激活值,defaults的trigger用list代替,而不是固定的输入值。这是基本的思想。
功能基本实现,缺陷是实现必须依靠刷新网页。每一次单选按钮更改值后,并不能将值传入到插件中:这是关键问题所在。
测试方法
$("input").click(function () {
list= $('input:radio:checked').val();
alert(list);
});
每次单选按钮被点击后,再次获取。可以在弹出窗口中看到list的值确实发生了改变,但好像依然没有传入到插件函数中。
这tm就纠结了!
代码全文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery插件学习---1</title>
<script src="../../lib/jquery/jquery.js"></script>
</head>
<body>
<p id="para_1">this is a paragraph</p>
<button>button</button>
<p id="para_2">this is a paragraph</p>
<form action="">
<input type="radio" name="trigger" value="button" id="test001">button
<input type="radio" name="trigger" value="#para_2" id="test002">第二段
</form>
<script>
//alert($("#test001").val());
// $("#test001").click(function () {
// alert(this.value);
// });
</script>
<script>
(function ($) {
//var trigger_chosen;
// if($("#test002").attr("checked")){
// trigger_chosen=$("#test002").val();
// }else {
// trigger_chosen=$("#test001").val();
// }
//alert($("#test002").attr("checked"));
var list;
list= $('input:radio:checked').val();
$("input").click(function () {
list= $('input:radio:checked').val();
alert(list);
});
var defaults={
color:"red",
backgroundColor:"black",
trigger:list
};
var methods={
init:function (options) {
var settings=$.extend({},defaults,options);
return this.each(function () {
var $this=$(this);
$this.css({
color:settings.color,
backgroundColor:settings.backgroundColor
});
$(list).click(function () {
$this.fadeToggle(700);
});
});
}
};
$.fn.plugin_1=function () {
var method=arguments[0];
if(methods[method]){
method=methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
} else if(typeof method==="object"||!method){
method=methods.init;
}else{
$.error("error happened!");
return this;
}
return method.apply(this,arguments);
};
})(jQuery);
$("#para_1").plugin_1();
</script>
</body>
</html>