ayud a con codigo jquery

[Juanjo87]

muy buenas comunidad.
pues estoy intentando a través de jquery, asignarle a un div, sobre el que hago click, una clase, y al presionar otro div, esta clase se le asigne a este nuevo, y se le quite al anterior.

El problema que las imágenes se me generan automáticamente, todas con el mismo id, y claro, si tengo 7 imágenes pues estas 7 tienen el mismo id.
de esta manera consigo lo que quiero:

Código PHP:

  <script>
$(document).ready(function(){
   $("img#aa").on('click',function(event){
      $(this).addClass("AA");
      $(".owl-carousel .owl-item").addClass("BB");
   });
   $("img#aa").mouseenter( function(){
      $("img#aa").removeClass("AA");
     
      
      
   });
});
</script> 
  

pero claro con el metodo .mouseenter.

Si intento cambiarlo a .on al llamarse los 2 divs iguales, en la misma función le estaría diciendo que al presionar sobre img#aa tanto se le asigne, como se le quite la clase AA, por lo tanto no funcionaria.

de que forma puedo hacerlo?
Gracias

[rodocoyote15]

Se me ocurre rapido que sustituyas llamarlos por clases, y a cada ID le asignes un numero autoincrementable, en un input hidden coloques el numero total de imagenes que te devuelva la consulta. Luego, dentro de cada on click captures el id del div seleccionado.

Hagas un for, donde el "i < valorInputHidden" y en cada iteracion evalues si el ID de cada div es diferente al "id del div seleccionado", que le quite la clase deseada.

Si necesitas que me explique mas me dices jaja.

[Juanjo87]

jajajaj gracias rodocoyote15 la verdad que no se por donde empezar.

ya habia pensado lo de autoincrementar el id del div con un numero pero no e encontrado la forma de hacerlo.

este codigo se encarga de hacerme un relacion de 20 peliculas por genero:

Código PHP:

 //FUNCION ENTRADAS RELACIONADAS POR TAXONOMIAS CON IMAGENES------------------------------------------
function related_posts_juanjo(){
    global $post;
// get the custom post type's taxonomy terms
 
$custom_taxterms = wp_get_object_terms( $post->ID, 'genero', array('fields' => 'ids') );
// arguments
$args = array(
'post_type' => 'pelicula',
'post_status' => 'publish',
'posts_per_page' => 20, // you may edit this number
'orderby' => 'title',
'order'   => '',
'tax_query' => array(
    array(
        'taxonomy' => 'genero',
        'field' => 'id',
        'terms' => $custom_taxterms
    )
),
'post__not_in' => array ($post->ID),
);
$related_items = new WP_Query( $args );
// loop over query
if ($related_items->have_posts()) :
echo ' <div class="container-carousel">
          <div class="row">
            <div class="span12">
<div id="owl-demo" class="owl-carousel">';
 
while ( $related_items->have_posts() ) : $related_items->the_post();
?>
 
 
 
<div class="item">
              
             <a target="related" id="tittle-panel" href="#cont-related" onclick="showFicha('<?php echo $post->ID;?>'); return false;" "> 
               
               <?php $images = get_custom_field('little_image:to_image_src'); foreach ($images as $img){printf('<img id="aa" class="lazyOwl"class="AA"  data-src="%s"/ alt="Lazy Owl Image" align="center">', $img);}?>
               
               </a>
         
            </div>
          
 
<?php
 
endwhile;
echo '</div></div></div></div>';
endif;
// Reset Post Data
wp_reset_postdata();
}
 
?>   

si te fijas, esta parte de el codigo es la que se repite en este caso 20 veces, que serian las 20 películas:

Código PHP:

 <div class="item">
              
             <a target="related" id="tittle-panel" href="#cont-related" onclick="showFicha('<?php echo $post->ID;?>'); return false;" "> 
               
               <?php $images = get_custom_field('little_image:to_image_src'); foreach ($images as $img){printf('<img id="aa" class="lazyOwl"class="AA"  data-src="%s"/ alt="Lazy Owl Image" align="center">', $img);}?>
               
               </a>
         
            </div>  

el autoincrement tendria que añadirselo en esta linea

Código PHP:

  <?php $images = get_custom_field('little_image:to_image_src'); foreach ($images as $img){printf('<img id="aa" class="lazyOwl"class="AA"  data-src="%s"/ alt="Lazy Owl Image" align="center">', $img);}?>   

si no me equivoco, justo aqui:

Código PHP:

  printf('<img id="aa" class="lazyOwl"class="AA"  data-src="%s"/ alt="Lazy Owl Image" align="center">', $img); 
   

pero no se como...

el jquery que interactu con este codigo es el que puse en el primer comentario, mas algo mas:

Código PHP:

  <script>
$(document).ready(function(){
   $("img#aa").on('click',function(event){
      $(this).toggleClass("AA");
      $(".owl-carousel .owl-item").addClass("BB");
   });
   $("img#aa").mouseenter ( function(){
      $("img#aa").removeClass("AA");
     
      
      
   });
});
</script>
 
 
    
<script type="text/javascript">
function showFicha(id){
    
    $("#destino").slideDown(500)
    .html("<div id='load'  ></div>");        
    jQuery.post(
        "/peliculas/wp-admin/admin-ajax.php", 
        {
        'action': 'mostrar_ficha',
        'post_id':   id
        }, 
        
    function(response){
        
        $("#destino").html(response);
        $("#aa2,#ocultar").on( "click", function() {
              $(".owl-carousel .owl-item").removeClass("BB");
            $('#destino').slideUp(500); //oculto mediante id
        $("img#aa").removeClass("AA");
        });
 
    
    });
}
</script> 
  

a ver si con estos codigos, puedes explicarme un poco mejor lo que debo hacer, por favor, llevo dias ya con el problemita y me estoy volviendo loco.

[Juanjo87]

edito*

Tambien me puede valer que se ejecute la funcion showFicha la primera vez con un click y una vez desplegado #destino pueda seleccionar las siguientes películas para abrir #destino con un mouseenter, pero tampoco se como hacerlo.
no se si me e explicado bien.

[rodocoyote15]

Código PHP:

<?php 
$images = get_custom_field('little_image:to_image_src'); 
$id = 0;
foreach ($images as $img){
 printf('<img id="aa'.$id.'" class="lazyOwl"class="AA"  data-src="%s"/ alt="Lazy Owl Image" align="center">', $img);
$id++;
}?>
 

Así podría ser el autoincrementable. Luego como te digo, en algun lado pondrías un input hidden

Código PHP:

<input type="hidden" id="numeroIds" value="<?php echo mysqli_num_rows($sql); ">
 

Aquí no se como manejes, pero la sintaxis mysqli_num_rows te daría el numero de ids total, sería cosa que lo adaptes, lo que se busca es devolver el numero de filas ;)

Luego

Código Javascript:

$(".lazyOwl").on('click',function(event){ 
   $numeroId = $("#numeroIds").val();
 
   for(i = 0; i < $numeroId; i++){
       // aqui se me acabo como seguir tu codigo jaja. 
   
   };
   });
 

En el for es donde preguntarías si ese div fue el seleccionado, que añada la clase, y si no, que la remueva. Te dejo que le pienses a eso de tarea, mañana te leo jaja! Saludos

[Alexis88]

Lo único que tienes que hacer es delegar el evento click al elemento en el cual se insertan las imágenes dinámicas o al documento mismo, buscar elementos que posean la clase que se va a añadir (por si antes se añadió dicha clase a algún elemento), quitársela si se la encuentra y asignársela al elemento clickeado.

Código Javascript:

$(document).on("click", ".la clase de las imágenes", function(){
    if ($(".la nueva clase").length){
        $(".la nueva clase").removeClass("la nueva clase");
    }
    $(this).addClass("la nueva clase");
});
 

DEMO

Con el método .removeClass() retiras una determinada clase de un elemento, mientras que con el método .addClass() haces lo contrario.

P. D.: Nunca asignes el mismo id a más de un elemento en el mismo documento. Dicho valor debe ser único.

Un saludo