我想通過面向物件的思想來實作點擊數量的累加，奈何實力有限，想請教下大家，我的想法是否現實
目的:很多條新聞在同一頁面，每一條新聞下面有三個表示數量的區域，每個區域有一個標簽顯示數量，一個標簽是一個+1的標簽，只要點擊+1,前面的數字就會自動加1，因為有很多個這樣的區域，所以我想封裝一個函式來實作，想到了面向物件
我的想法是:將前面的數字所在的標簽和后面的+1標簽作為引數，用一個函式來實作上面的操作，奈何想了好久也沒有實作，目前確實找到了替代方法，但是我還是想知道我的這個想法可以實作嗎？謝謝大家了！
uj5u.com熱心網友回復：
<span id="s1">1</span><input type="button" onclick="add1('s1')" value="https://bbs.csdn.net/topics/+1" /><br>
<span id="s2">1</span><input type="button" onclick="add1('s2')" value="https://bbs.csdn.net/topics/+1" /><br>
<span id="s3">1</span><input type="button" onclick="add1('s3')" value="https://bbs.csdn.net/topics/+1" /><br>
<span id="s4">1</span><input type="button" onclick="add1('s4')" value="https://bbs.csdn.net/topics/+1" /><br>
<script type="text/javascript">
function add1(id) {
document.getElementById(id).innerText++;
}
</script>
uj5u.com熱心網友回復：
謝謝謝謝！技能學到了！開心，附上我的笨辦法！uj5u.com熱心網友回復：
<!DOCTYPE html><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>
uj5u.com熱心網友回復：
基礎不好，差了很多例子！感謝轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/133100.html
標籤：JavaScript
上一篇：flv.js播放flv視頻失敗
下一篇：JvectorMap