Sucede que tengo 2 divs que contienen 2 "estrellitas" entonces una de ella se encuentra oculta y la otra visible, al presionar sobre la visible debe desaparecer y aparecer la "oculta" y así viceversa.
function SaveAndHide(star) {
//Aquí solo desaparece la primera estrella si presionas click sobre ella
star.style.display = "none";
//Aquí debería tener la forma de aparecer la otra estrella.
}
.star {
width: 100px;
height: 100px;
background: gray;
display: flex;
flex-direction: column;
border: 1px solid black;
}
i {
color: red;
}
#saved {
display: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="star">
<i class="fa fa-star-o" aria-hidden="true" onclick="SaveAndHide(this)" id="unsaved"></i>
<i class="fa fa-star" aria-hidden="true" id="saved"></i>
</div>
<div class="star">
<i class="fa fa-star-o" aria-hidden="true" onclick="SaveAndHide(this)" id="unsaved"></i>
<i class="fa fa-star" aria-hidden="true" id="saved"></i>
</div>
De modo que al presionar sobre una se "oculte" y "aparezca" únicamente el que estoy presionando.
id
class
en lugar deid
, los ids no se deben repetir porque justamente sirven para identificar a cada elemento del DOM,