发表于: 2017-03-27 23:17:25

1 711


今天完成的事:

a;继续编写任务3

总结下思路:

首先编写CSS样式(不多做解释,该display:none的none就行);

主要JQ部分

需求:点击按钮一次 页面内容和按钮内内容都做出相应的改变;

思路:首先想到了这几天学习的JQ中的交换toggle() :[即俩个或者多个函数,以响应被选元素的click事件之间的切换。当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。]

于是尝试编写dome

$(document).ready(function(){

  $("p").toggle(

    function(){$("p").css({"color":"red"});},

    function(){$("p").css({"color":"blue"});},

    function(){$("p").css({"color":"green"});

  });

});

</script>

</head>

<body>

<p style="font-size:40px">点我。</p>

可以实现点击即交换功能,在正式编写时,发现点击按钮无任何“反应”,查找原因,即toggle在jq1.9版本即已移除...(失败)

重新构思:

结合toggle原理,使用JQ 中的hide和show(还是直接看代码把。。。)

$('button').click(function(){

//点击button触发函数

    if($(".behind").is(":visible")){

    //判断behind如果可见

        $(".behind").hide();

       //隐藏behind

    }else{

    //反之

        $(".behind").show();

      //显示behind

    }

})

——————————————————

$("button").click(function(){

//点击buttonc触发函数

if($(".hou").is(":visible")){

//判断hou如果可见

$(".hou").hide();

//隐藏hou

}

else{

//反之(不可见)

$(".hou").show();

//显示hou

}

})

很好,可以实现点击交换,并且效果完美 ,到这一步 那么基本功能就都实现了(因为研究玩这个我又跑题了,去研究了别的QAQ),

明天的计划:

a,把任务3该传的值都给传了,

b,研究一波任务4所需的知识点;

遇到的问题:

a;请给我一点传值的思路

收获:

如何在toogle被移除后,利用JQ实现toogle功能。(其实这个坑,我研究了好久。。。)


返回列表 返回列表
评论

    分享到