jquery插件开发学习笔记（五）——动态选择触发器

来源：互联网发布：path软件2017 编辑：程序博客网时间：2024/06/07 14:06

写在前面

想实现这样的功能：在前面触发某个对象切换隐藏和显示的功能中，在不刷新网页的情况下，可以动态地切换触发器。原理是有两个单选按钮，提供两个触发器。用户可以选择单选按钮来触发。
目前，可以利用单选按钮来切换，但得依靠刷新网页。
还没找到解决方案。
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>

0 0