solo abre el primer divisor

[Quiramax]

Hola buen día !!!

he creado una especie de ventana modal que mostrará información al darle clic al botón para que se abra, hasta ahi todo bien pero lo que pasa es que son varios div y quiero que cada uno abra su propio modal pero al darle clic a otro botón no abre la ventana solo lo hace el boton del primer div.

este es el script

Código HTML:

<script>
	$(document).ready(function(){
		$("#ver_mas").on('click', function(){
		$(".screen").fadeIn("slow");
		});
		$(".close").on('click', function(){
		$(".screen").fadeOut("slow");
		});
	});
	</script> 

probe agregando un this.next y no funciono

Código HTML:

<script>
	$(document).ready(function(){
		$("#ver_mas").on('click', function(){
		      $(this).next(".screen").fadeIn("slow");
		      });
		$(".close").on('click', function(){
		      $(this).next(".screen").fadeOut("slow");
		});
	});
	</script> 

como puedo hacer para que cada boton me abra en cada div de manera independiente.

GRACIAS

[MarioAraque]

Podés pasar tu html así vemos como lo estructuraste?

El problema es que usas como selector ".screen", y si tenés más de uno siempre va a coger el primero.

Saludos.

[Quiramax]

este es el codigo html pero es raro lo que me dices que de solo abriria el primero por si te fijas el div con clase info tambien es una clase y esta igual en todos los div y con el script que tengo me abre independiente en cada uno pero lo probe para .screen y no funciono y le cambie cosas pero como soy mas bien nuevo con el jquery todavia me falta mucho

Código HTML:

<div class="principal">
			<h2>titulo</h2>
			<img src="img/item2.jpg" alt="">
			<img class="more" src="img/more.png" >
			<div class="info">
				<h3>Mes de..</h3>
				<ul>
					<li>aqui van items</li>
					<li>aqui van items</li>
					<li>aqui van items</li>
					<li>aqui van items</li>
					<li>aqui van items</li>
					<li>aqui van items</li>
				</ul>
				<h3>otro titulo</h3><br>
				<div id="ver_mas" href="#">Mas información</div>
			</div>
		</div>

		<div class="screen">
			<div class="modal_info">
			<img src="img/item.jpg" alt="">
			<ul>
					<li>Del 26 al 31 de diciembre</li>
					<li>no es acomulable con otros descuentos</li>
					<li>Info: 000 0000(ciudad)</li>
					<li>Horario de atencion:<br>
						Lunes a Domingo 9am - 8pm</li>
					<li>Centro Comercial</li>
					<li>Local: 0000</li>
				</ul>
			</div>
			<div class="close">Cerrar</div>
		</div> 

[lilmaster]

Hola te pongo un ejemplo

Código HTML:

<button>Hazme click</button>
<button>Hazme click</button>
<button>Hazme click</button>


<script>

$(function() {
			$('button').click( function (){
				$('this').text("Hola!");
			}); 
});
	


</script> 

Lo que esta sucediendo ahi es que hay varios botones pero la logica sera

cuando de click en el boton
a este cambiele el texto a hola