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

最新推荐文章于 2020-11-21 20:01:42 发布

chenqiong1991

最新推荐文章于 2020-11-21 20:01:42 发布

阅读量441

点赞数

分类专栏：学习笔记 jquery插件学习笔记文章标签： jquery插件解决方案

本文链接：https://blog.csdn.net/chenqiong1991/article/details/68936456

版权

学习笔记同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

jquery插件学习笔记

12 篇文章 0 订阅

订阅专栏

写在前面

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

chenqiong1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件开发学习笔记（五）——动态选择触发器

写在前面想实现这样的功能：在前面触发某个对象切换隐藏和显示的功能中，在不刷新网页的情况下，可以动态地切换触发器。原理是有两个单选按钮，提供两个触发器。用户可以选择单选按钮来触发。目前，可以利用单选按钮来切换，但得依靠刷新网页。还没找到解决方案。 to be continued… 以后总会有方法的。代码<form action=""> <input type="radio" nam
复制链接

扫一扫