Como establecer elemento seleccionado como primero?

sevilla666 · 20 Dic 2016

Ahora mismo no.
Te diré algo mañana, dejame pensarlo.

No es lo mismo ver el código en mi pantalla, que ver trozos de código

- - - Actualizado - - -
Juanjofurtado
Ok, dia nuevo sangre nueva que riega mi cerebro.
Las soluciones son variadas según código que tengas, la pagina no son las cuatro lineas que vemos.

He mirado la documentación de Jquery-index(). Pienso que el problema es que la llamada a index() no te lee esto: "'#carousel-accion>li a'". Por lo tanto tienes que crear una función nueva con otro identificador.
Podría ser el identificador <a> o <li> que ya los tienes y te quedaría asi la función :
$('a').click(function() {
now = $(this).index();
pero si <a> o <li> ya los usas en otra parte de la página no sirve, porque también los contabiliza.

Pero igual tienes un class o un id en esas <img> tipo class="unnombre" y entonces tendrías que aprovechar ese class de identificador algo asi
$('.unnombre').click(function() {
now = $(this).index();

Lo que te ha comentado Jsstoni también es muy valido, O crea un class para cada imagen, imagino que el código es muy dinámico y cuando pones esa imagen tienes que conseguir que ponga el identificador nuevo.

Algo así tienes que hacer, pero no te puedo ayudar porque en los detalles del código esta la clave, y el código solo lo ves tu.

Juanjo87 · 21 Dic 2016

pues nada no lo consigo, llevo todo el día intentándolo de distintas formas y nada.
Hice lo que comentaba Jsstoni y le añadí el atributo data-posimg de la siguiente forma

PHP:

$("#carousel-accion li a img").each(function(i) {
		
    var autoincrement = (i+1);
	 
	$(this).attr("data-posimg", autoincrement);		 

	});

y el codigo completo queda asi

PHP:

<script>

	


$(document).ready(function() {
	
 $("#carousel-accion li a img").each(function(i) {
		
    var autoincrement = (i+1);
	 
	$(this).attr("data-posimg", autoincrement);		 

	});	
	
	
    var divs = $('#carousel-accion>li a');
   var now = $("#carousel-accion li a img").attr("data-posimg");
  
	
	
	
	
    $("button[name=next] i").click(function() {
 
		
        now = (now + 1 < divs.length) ? now + 1 : 0;
		
    
	  
	   divs.eq(now).click();
	   
	   

    });
	
	
	
	
	
    $("button[name=prev] i").click(function() {
        divs.eq(now).css("border", "0");
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).click();
    });
});

</script>

y funciona, pero me sigue mandando a la primera imagen, en vez de, a la que esta a continuación al darle a siguiente.

Observando bien el código me da a pensar de que el fallo esta en la siguiente linea:

PHP:

 now = (now + 1 < divs.length) ? now + 1 : 0;

exactamente .length creo que es lo que me esta mandando a la primera imagen aun que ya ni se que pensar...

se te ocurre algo sevilla666, alguien que nos este leyendo puede aportarnos algo?

Gracias

sevilla666 · 21 Dic 2016

No no l< divs.length solo dice si es menor que el numero de elementos totales.

¿tienes esta web colgada en internet?
Dejame ver el enlace que mirare el código
por lo menos pon aquí la imagen como va como: "<div><li><a>imagen etc.."

Por cierto tu tienes publicidad en alguna web?
si es si, responde este tema que nadie me responde forobeta

Juanjo87 · 21 Dic 2016

no aun no la tengo colgada, la tengo en local y respecto a la publi aun no e entrado en eso pero voy a mirar por si puedo ayudarte en algo.
te comento la estructura.
estoy trabajando en wordpress entonces en function tengo esto

PHP:

echo '
<div id="carousel-accion" class="owl-carousel owl-theme">';

while ( $related_items->have_posts() ) : $related_items->the_post();

?>


<li title="<?php echo $post->post_title; ?>" class="licar" >

    <a href="tooltip-ajax" onclick="showFicha_tooltip('<?php echo $post->ID;?>','tooltip_ajax','tooltip-ajax'); return false;">

        <img data-src="<?php the_post_thumbnail_url( 'medium' ); ?>"  class="lazyOwl"/>

    </a>

</li>


<?php

endwhile;
echo '</div>';

que me genera algo asi

<div>

<li>
<a>
<img></img>
</a>
</li>

<li>
<a>
<img></img>
</a>
</li>

<li>
<a>
<img></img>
</a>
</li>

<li>
<a>
<img></img>
</a>
</li>

</div>

sevilla666 · 21 Dic 2016

Ok
Yo entiendo que te tiene que generar:
<li title="loquesea class="licar" etc etc

si es asi:
pon la funcion:
$('.licar').click(function() { //licar lleva un punto delante
now = $(this).index();
});
ponla debajo de;

$(document).ready(function() {

Juanjo87 · 21 Dic 2016

asi cuando le doy a siguiente me carga siempre el mismo div ,no avanza

sevilla666 · 21 Dic 2016

Ok
imagino que la clase licar la usaran mas <li> por eso no te funciona

El Estoke:

cambia
<a href="tooltip-ajax" onclick="showFicha_tooltip('<?php echo $post->ID;?>','tooltip_ajax','tooltip-ajax'); return false;">
por:
<a href="tooltip-ajax" <?php echo "class='thethe' "; ?> onclick="showFicha_tooltip('<?php echo $post->ID;?>','tooltip_ajax','tooltip-ajax'); return false;">

y pones:
$('.thethe').click(function() { //thethe lleva un punto delante
now = $(this).index();
});
ponla debajo de;

$(document).ready(function() {

si no te funciona esto.....plego

Juanjo87 · 22 Dic 2016

nada... no soy capaz, no se que falla, lo que no entiendo, xq cuando pincho encima de una imagen, el alert me marca bien el numero de imagen pero después, cuando le doy a siguiente, me marca 0.
Por ejemplo si pincho en la imagen 4, el alert me sale como que pincho en la 4 pero cuando le doy a siguiente el alert se me pone a 0 y me manda a la primera imagen que seria 0...

eso pasa de esta forma

PHP:

$(document).ready(function() {
	
 $("#carousel-accion li a img").each(function(i) {
		
    var autoincrement = (i+1);
	 
	$(this).attr("data-posimg", autoincrement);		 

	});	
	
	
    var divs = $('#carousel-accion>li a');
  
 
	
	$('#carousel-accion>li a img').click(function() { //thethe lleva un punto delante
var now = $(this).attr("data-posimg");
 alert(now);
 
 
    $("button[name=next] i").click(function() {
 
		
        now = (now + 1 < divs.length) ? now + 1 : 0;
		
    
	  
	   divs.eq(now).click();
	   
	   alert(now);
	

    });
	
});

- - - Actualizado - - -

vale un pequeño psito por si alguien quiere ayudarme, me e dado cuenta que en esta linea

HTML:

 now = (now + 1 < divs.length) ? now + 1 : 0;

exactamente al final de la linea donde dice: ? ? now + 1 : 0;

Creo que es donde esta el fallo, pues si cambio 1 : 0 a x ejemplo 1 : 5 cuando doy a siguiente, empieza desde la img 5 si le dejo en 0 pues lógicamente desde la primera que es 0.

No entiendo muy bien que quiere decir esa linea pues lo que entiendo es que now es igual a now + 1 q si now es 5 se le sume 1 = 6 pero lo demas no lo entiendo < divs.length) ? now + 1 : 0; y hasy es donde creo que esta el fallo

sevilla666 · 22 Dic 2016

juanjofurtado dijo:
nada... no soy capaz, no se que falla, lo que no entiendo, xq cuando pincho encima de una imagen, el alert me marca bien el numero de imagen pero después, cuando le doy a siguiente, me marca 0.
Por ejemplo si pincho en la imagen 4, el alert me sale como que pincho en la 4 pero cuando le doy a siguiente el alert se me pone a 0 y me manda a la primera imagen que seria 0...

eso pasa de esta forma

PHP:

$(document).ready(function() { $("#carousel-accion li a img").each(function(i) { var autoincrement = (i+1); $(this).attr("data-posimg", autoincrement); }); var divs = $('#carousel-accion>li a'); $('#carousel-accion>li a img').click(function() { //thethe lleva un punto delante var now = $(this).attr("data-posimg"); alert(now); $("button[name=next] i").click(function() { now = (now + 1 < divs.length) ? now + 1 : 0; divs.eq(now).click(); alert(now); }); });

- - - Actualizado - - -

vale un pequeño psito por si alguien quiere ayudarme, me e dado cuenta que en esta linea

HTML:

now = (now + 1 < divs.length) ? now + 1 : 0;

exactamente al final de la linea donde dice: ? ? now + 1 : 0;

Creo que es donde esta el fallo, pues si cambio 1 : 0 a x ejemplo 1 : 5 cuando doy a siguiente, empieza desde la img 5 si le dejo en 0 pues lógicamente desde la primera que es 0.

No entiendo muy bien que quiere decir esa linea pues lo que entiendo es que now es igual a now + 1 q si now es 5 se le sume 1 = 6 pero lo demas no lo entiendo < divs.length) ? now + 1 : 0; y hasy es donde creo que esta el fallo

Edito
Es que miro el código desde el móvil, y es complicado
Mueves
var now = 0;
Una línea antes de document ready function()

Si le estas dando al último div es normal que salte al primero

Juanjo87 · 22 Dic 2016

si te fijas bien sevilla666 ya en el código no aparece var now = 0; lo que aparece es

var now = $(this).attr("data-posimg");

- - - Actualizado - - -

Nada, no hay manera

sevilla666 · 24 Dic 2016

Hey juanjofurtado

Ok en vista que nadie te contesta con ideas frescas, lo he estado mirando un poco mas a fondo.

Esta arreglado y te he puesto el ejemplo aqui:
https://prueba666.000webhostapp.com/prueba/.
Funciona bien excepto cuando le das directamente no esta puesta la funcion "onclick="showFicha_tooltip( "ya que no la tengo) pero veras que los alerts(now) coinciden con lo que necesitas.
Habia que poner now = $('.thethe').index(this); en vez de now = $(this).index();--

Me habias puesto código diciendo que funciona y el primer código que pusiste no funciona. Pusiste:
divs.eq(now).click(); y lo he cambiado por: divs.eq(now).css("border", "solid 1px white"); (PUEDE SER A FALTA DE DATOS QUE EN ESTO ESTE YO EQUIVOCADO)

Bueno puedes mirar el código fuente del enlace que te he pasado y a fin de cuentas es todo lo que te había escrito. (por cierto quita todo lo que te recomendó jsstoni de "data-posimg" no estaba mal el código pero se ha hecho de otra forma y podría modificar la variable now)

Felices fiestas.

Pd.- dime como te ha ido

Juanjo87 · 25 Dic 2016

parece que ahora si, he modificado algunas cositas, por ejemplo, esto que comentas: divs.eq(now).click(), lo he vuelto poner así, pues la función completa no es solo para pasar entre las imágenes, digamos que entra en una imagen, y al darle a siguiente, me carga el contenido de la siguiente imagen por ajax, entonces a ti no te funcionaba esa parte xq mandaba a otra función que no e puesto, mas que nada por dejarte claro mas o menos el xq tengo eso así.

Mil gracias sevilla666 ya nos veremos por aquí y si puedo ayudarte en algo ya sabes, por aquí estoy.

Muchas gracias y Felices fiestas :encouragement:

asi queda el codigo:

PHP:

<script>
$('.a_img_carousel').on('click', function() {
now = $('.a_img_carousel').index(this);

}); 
  
    var divs = $('#carousel-accion>li a');
    

    $("button[name=next]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now + 1 < divs.length) ? now + 1 : 0;
    divs.eq(now).click();

    });
    
    
    
    $("button[name=prev]").click(function() {
        divs.eq(now).css("border", "0");
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).click();

    });
});
</script>

Como establecer elemento seleccionado como primero?

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

Temas similares