我想通过面向对象的思想来实现点击数量的累加，奈何实力有限，想请教下大家，我的想法是否现实
目的:很多条新闻在同一页面，每一条新闻下面有三个表示数量的区域，每个区域有一个标签显示数量，一个标签是一个+1的标签，只要点击+1,前面的数字就会自动加1，因为有很多个这样的区域，所以我想封装一个函数来实现，想到了面向对象
我的想法是:将前面的数字所在的标签和后面的+1标签作为参数，用一个函数来实现上面的操作，奈何想了好久也没有实现，目前确实找到了替代方法，但是我还是想知道我的这个想法可以实现吗？谢谢大家了！
目的:很多条新闻在同一页面，每一条新闻下面有三个表示数量的区域，每个区域有一个标签显示数量，一个标签是一个+1的标签，只要点击+1,前面的数字就会自动加1，因为有很多个这样的区域，所以我想封装一个函数来实现，想到了面向对象
我的想法是:将前面的数字所在的标签和后面的+1标签作为参数，用一个函数来实现上面的操作，奈何想了好久也没有实现，目前确实找到了替代方法，但是我还是想知道我的这个想法可以实现吗？谢谢大家了！
<span id="s1">1</span><input type="button" onclick="add1('s1')" value="+1" /><br>
<span id="s2">1</span><input type="button" onclick="add1('s2')" value="+1" /><br>
<span id="s3">1</span><input type="button" onclick="add1('s3')" value="+1" /><br>
<span id="s4">1</span><input type="button" onclick="add1('s4')" value="+1" /><br>
<script type="text/javascript">
function add1(id) {
document.getElementById(id).innerText++;
}
</script>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.dd{
background-color: blue;
}
#ce{
border: 1px solid red;
margin-bottom: 15px;
width: 200px;
}
</style>
<body>
<div id='ce' class="aaa">
<div class="pp">
56
</div>
赞:<button class="btn_zan">500</button>
</div>
<div id='ce' class="aaa">
<div class="pp">
56
</div>
赞:<button class="btn_zan">500</button>
</div>
</body>
<script type="text/javascript">
var btn_zan=document.querySelectorAll('.btn_zan')
function dianZan(a){
// 获取点赞按钮
var z=a.getAttribute('class')
if(z=='btn_zan'){
a.innerHTML =parseInt(a.innerHTML) + 1;
a.className='btn_zan dd'
// 获取父元素和父元素之后的要改变的元素 然后进行操作
// 重点是parentNode 和getElementsByClassName('pp')[0]
var ccc=a.parentNode.getElementsByClassName('pp')[0];
ccc.innerHTML=parseInt(ccc.innerHTML)+1
}else{
a.innerHTML =parseInt(a.innerHTML) -1;
a.className='btn_zan'
// 获取父元素 然后进行操作
var nnn=a.parentNode.getElementsByClassName('pp')[0];
nnn.innerHTML=parseInt(nnn.innerHTML)-1
}
}
// 绑定事件 完成！ 用this 来获取当前对象
for(var i=0;i<btn_zan.length;i++){
btn_zan[i].onclick= function(){
dianZan(this)
}
}
</script>
</html>