发表于： 2017-03-27 23:17:25
1 712
今天完成的事：
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功能。（其实这个坑，我研究了好久。。。）
返回列表
评论