Não use id
para os elementos, porque você estará duplicando id's nos dois botões, o que é errado no HTML. Em vez disso use dataset data-id
, por exemplo:
<button class="btnlike" data-id="1">LIKE</button>
<button class="btnnotlike" data-id="1">NOT LIKE</button>
Se tiver usando a tag button, como acima, use value
em vez de
data-id
.
Use o método $.grep() do jQuery para filtrar as arrays removendo, caso exista, o valor do botão clicado na outra array.
Ou seja, você verifica se o valor existe na array com .$inArray
e em seguida usa o $.grep
para remover o valor da outra array. O código fica bem simples, como mostra abaixo. Dá até para melhorar mais juntando os eventos nos dois botões num só, mas coloquei em separados mesmo para ficar mais fácil de ler.
//DEFINE ARRAYS
like = new Array();
notlike = new Array();
//SE CLICA NO btnlike VAI PARA ARRAY LIKE
$(".btnlike").on("click", function() {
var valor = $(this).data("id");
if(!~$.inArray(valor, like)){
like.push(valor);
}
notlike = $.grep(notlike, function(v){
return v != valor;
});
// daqui pra baixo é só para ilustração. Não inclua
console.clear();
console.log("LIKE: ", like.join(","));
console.log("NOTE LIKE: ", notlike.join(","));
});
//SE CLICA NO btnnotlike VAI PARA ARRAY NOTLIKE
$(".btnnotlike").on("click", function() {
var valor = $(this).data("id");
if(!~$.inArray(valor, notlike)){ // verifica se já existe
notlike.push(valor); // adiciona na array
}
like = $.grep(like, function(v){ // remove da outra array
return v != valor;
});
// daqui pra baixo é só para ilustração. Não inclua
console.clear();
console.log("LIKE: ", like.join(","));
console.log("NOTE LIKE: ", notlike.join(","));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1. <button class="btnlike" data-id="1">LIKE</button>
<button class="btnnotlike" data-id="1">NOT LIKE</button>
<br><br>
2. <button class="btnlike" data-id="2">LIKE</button>
<button class="btnnotlike" data-id="2">NOT LIKE</button>
<br><br>
3. <button class="btnlike" data-id="3">LIKE</button>
<button class="btnnotlike" data-id="3">NOT LIKE</button>