如何在多个元素上进行切换?

我在我的信标<div class="post">

另一个信标<p class="compteur"></p>

，如果用户点赞(点击)它将被递增，如果用户点赞(点击)它将被递减。

由于这个原因，我使用一个布尔值来检查条件在js中，我有一个函数，它负责

但是当我将此函数应用于我的代码中的多个标签恢复时，它们都作用于导致我问题的相同布尔值和值。

我希望它们都是独立的

const cerle = document.getElementsByClassName('cerle')
const compteur = document.getElementsByClassName('compteur')
let onOff =  false;
let nbr =  0;
function compte (i) {
if (onOff == false) {
nbr++
console.log( nbr);
onOff= true;
console.log( onOff);
compteur[i].innerHTML=`${nbr}k`
}else if(onOff == true){
nbr--
console.log( nbr);
onOff= false;
console.log( onOff);
compteur[i].innerHTML=`${nbr}k`
}
}
for (let i = 0; i < cerle.length; i++) {
cerle[i].addEventListener("click",()=>{
compte (i);
});
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.contain{
align-items: center;
display: flex;
flex-direction: row;
width: 100%;
height: 400px;
background-color: yellowgreen;
}
.post{
margin-left: 30px;
width: 30%;
height: 70%;
background-color: rgb(73, 50, 205);
}
.cerle{
width: 20%;
height: 30%;
border-radius: 50%;
background-color: rgb(205, 35, 35);
}

<body>
<div class="contain">
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
</div>
</body>

在这里我能够解决我的问题，感谢每一个帮助我的人

我通过创建一个新的对象分配给每个恢复的div只有js文件改变。

这是我的代码。

const cerle = document.querySelectorAll(".cerle");
const compteur = document.getElementsByClassName('compteur');
let etat =  false;
var valeurDesPoste = new Array();

class compte {
constructor(onOff, valeur ,i) {
this.onOff = onOff;
this.valeur = valeur;
this.i = i;  
}
teste() {    

if (this.onOff == false) {
this.valeur++ ;
console.log( this.valeur);

this.onOff= true;
console.log( this.onOff);
compteur[this.i].innerHTML=`${this.valeur}k`

}else if(this.onOff == true){

this.valeur-- ;
console.log( this.valeur);

this.onOff= false;
console.log( this.onOff);
compteur[this.i].innerHTML=`${this.valeur}k`

}   

}
}

for (let i = 0; i < cerle.length; i++) { 
valeurDesPoste.push(50 *i);
// console.log( valeurDesPoste[i]);
let a =new compte(etat, valeurDesPoste[i] ,i);
cerle[i].addEventListener("click",()=>{

a.teste()
});
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.contain{
align-items: center;
display: flex;
flex-direction: row;
width: 100%;
height: 400px;
background-color: yellowgreen;
}
.post{
margin-left: 30px;
width: 30%;
height: 70%;
background-color: rgb(73, 50, 205);
}
.cerle{
width: 20%;
height: 30%;
border-radius: 50%;
background-color: rgb(205, 35, 35);
}

<div class="contain">
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>

</div>

相关内容

最新更新

热门标签：