2

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.

6
  • Hola, sergio, como te mencioné en la otra respuesta, no debes tener dos elementos con el mismo id Commented el 10 ago. 2017 a las 23:21
  • @CarlosMuñoz Agradezco tu respuesta, pero ¿por qué no?, lo que sucede es que luego repetiré los divs que sean necesarios en PHP, creía que un id pudiera tomar más fácil los valores y mostrarlos y ocultarlos, pero por el momento, no he podido comprender como hacer, ¿debo trabajar con nodos? ¿Algún otro selector?
    – trejocode
    Commented el 10 ago. 2017 a las 23:23
  • Podrías usar un class en lugar de id, los ids no se deben repetir porque justamente sirven para identificar a cada elemento del DOM, Commented el 10 ago. 2017 a las 23:28
  • @CarlosMuñoz Excelente, gracias, seguiré investigando como hacerlo.
    – trejocode
    Commented el 10 ago. 2017 a las 23:29
  • Solo para estar seguro, la estrella que debe aparecer es la "saved" y ocultarse la "unsaved"? Commented el 10 ago. 2017 a las 23:33

1 respuesta 1

2

Primero, no debes tener varios elementos con el mismo id. Si quieres identificar un conjunto de elementos similares puedes usarlo mediante class

Luego para poder obetener la estrella saved a partir de su estrella unsaved puedes ir al div padre y de ahí obtener el hijo que tenga la clase saved de modo que llegues a la estrella correspondiente y puedas activarla.

Ten en cuenta también los cambios en el CSS

function SaveAndHide(star) {
  // ocultamos la estrella unsaved
  star.style.display = "none";
  
  // mostramos la estrella saved.
  star.parentElement.getElementsByClassName("saved")[0].style.display = "block";
}
.star {
  width: 100px;
  height: 100px;
  background: gray;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

i {
  color: red;
}

i.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 unsaved" aria-hidden="true" onclick="SaveAndHide(this)"></i>
  <i class="fa fa-star saved" aria-hidden="true"></i>
</div>
<div class="star">
  <i class="fa fa-star-o unsaved" aria-hidden="true" onclick="SaveAndHide(this)"></i>
  <i class="fa fa-star saved" aria-hidden="true"></i>
</div>

1
  • 1
    Gracias, que genio, eso requería, te debo una hermano.
    – trejocode
    Commented el 10 ago. 2017 a las 23:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.