js实现简易关注按钮点击事件
学了web有一个月了
总想记点什么，但是一直没有行动，今天做了这个效果就记录一下吧
顺便总结下遇到的问题，也是为了以后可以更好的回顾。
下面上代码截图
html：
<button class="follow" onclick="show1()">
<span class="true">关注</span>
<span class="false">已关注</span>
</button>
这边就是很简单的 一个按钮，定义了两个span
css代码：
/*关注按钮*/
.follow{
display: block;
width: 25%;
height: 30px;
margin: 0 auto;
margin-top: 8px;
background: rgba(233, 7, 7, 0);
border: 1px solid red;
border-radius: 5px;
color: red;
outline: none;
}
.follow:hover{
background: rgba(233, 7, 7, 0.2);
}
.true{
display: inline;
}
.false{
display: none;
}
初始为关注 点击一下变为已关注 再点击就变为关注，这样重复下去。
js代码：
function show1(){
var aTrue = document.getElementsByClassName(true);
var aFalse = document.getElementsByClassName(false);
var x=1;
if ( aTrue[0].style.display!="none"){
aTrue[0].style.display="none";
aFalse[0].style.display="inline";
}else{
aTrue[0].style.display="inline";
aFalse[0].style.display="none";
}
}
前面写的都没有问题，但是在点击事件的时候遇到了一个小问题。
if判断总是进不去，后来发现是因为我的 判断条件中的aTrue后面没有加数组 [0]
就是aTru[0] 这里出现的问题，其实我还不是很懂这个原理，应该是同样的class可以定义多个，所以需要数组进行区分吧。
所以我想试试id来进行定义，看看是否有这种情况出现。
html和css一样，只不过把class的名字改为id
js代码：
function show1(){
var aTrue = document.getElementById(true);
var aFalse = document.getElementById(false);
if ( aTrue.style.display!="none"){
aTrue.style.display="none";
aFalse.style.display="inline";
}else{
aTrue.style.display="inline";
aFalse.style.display="none";
}
};
发现就没有数组问题了，但我还是用了第一个方法。
本人是小白，如果各位大神有什么好的方法也欢迎与我讨论，有意见和不对的地方也可以提出，在这里万分感谢！
想看完整demo代码，以后会上传github项目地址。