Estoy realizando una función que sirve para que cuando hagas click en el elemento .articulo
, el contenido del elemento .articulos
se modifique y en esa modificación se añaden dos botones .return
que sirven para volver al estado anterior del elemento .articulos
.
La función funciona perfectamente, hace todo lo que tiene que hacer debidamente, no obstante, solo me sirve para hacer un click. Es decir:
- Hago click en
.articulo
- Se despliega el nuevo contenido, modificándose el elemento
.articulos
- Hago click en
.return
y vuelvo a tener el contenido que tenía antes del paso 1 - Vuelvo a hacer click en
.articulo
y no se me despliega el nuevo contenido --> ESTE ES EL PROBLEMA
EL navegador no me muestra ningún mensaje de error, por lo que creo que el problema radica en la llamada a la función. Aún así, no he conseguido encontrar el problema.
Adjunto código:
$(document).ready(function() {
$('.articulo').click(function() {
abrirArticulo();
});
});
function abrirArticulo() {
console.log('hagoClick');
var titulo = $('.articulo .inverter h3').html();
var tema = $('.articulo .inverter p').html();
var imagen = 'img/prueba.png';
var contenido = $('.texto').html();
var antiguoContenido = $('.articulos').html();
var nuevoCont = '';
nuevoCont +=
'<h1>' +
titulo +
'</h1>' +
'<h3>' +
tema +
'</h3>' +
'<div> <img class="imagenArt" src=" ' +
imagen +
'" alt="Imagen en el otro img" /></div>' +
'<div>' +
contenido +
'</div>';
$('.articulos').html(nuevoCont);
$('.articulos').css({
'background-color': 'white',
'margin-top': '1%',
padding: '2%',
'border-radius': '1em'
});
$('.articulos').before("<div class='return'>Volver</div>");
$('.articulos').after(
"<div class='return' style='margin-top: 2%'>Volver</div>"
);
$('.return').click(function() {
$('.articulos').html(antiguoContenido);
$('.articulos').css({
'background-color': '',
padding: '0',
'border-radius': '0',
'margin-top': '0'
});
$('.return').remove();
});
$('.return').css({
'background-color': 'rgb(238, 208, 124)',
padding: '1%',
width: '10%',
'text-align': 'center'
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="articulos" id="cuerpo">
<div class="articulo">
<div class="artModoMovil">
<div class="inverter">
<h3>Título de articulo<small> Datos de publicación</small></h3>
<p>Temática</p>
</div>
<div class="inverterImg">
<img class="imagenArt" src="img/prueba.png" alt="Esto es una imagen de prueba">
</div>
<div class="texto">
Esto es texto
Esto es texto
Esto es texto
Esto es texto
Esto es texto
Esto es texto
Esto es texto
Esto es texto
</div>
</div>
<a href="#">Leer más</a> <br>
<small>Aquí va el autor</small>
</div>
</div>
display
con js, dependiendo si quieres mostrarlo u ocultarlo