3

Único detalle: Cómo quito estilo desde los elementos clonados en #campoBusq a su elemento proveniente? que esta en:

#cateoria>.cont-optionElement>.elemento ".$contador.

¿que métodos podría tomar para este problema?

Usuario Plantilla.php

<div id="campoBusq"></div> 

<div id="cont-categoria" class="centFRH">
        <div id="categoria">';
            include("selectCategJquery.php");
            <div class="mensCateg">Selecione las Categorias</div>
        </div>
</div>

selectCategJquery.php

<?php 
    $consulta = "SELECT idCategoria FROM buscar_categoria";
    $resultado = $conexion->query($consulta) or die("Error de busqueda o conexion");

    $contador = 0;
    while ($datosCateorias=$resultado->fetch_assoc() ) {
        $contador++;
        $varHtml .='<div class="cont-optionElement">';
            $varHtml .= "<div id='elementoBusq' class='elemento ".$contador."' iden='".$contador."' >". $datosCateorias['idCategoria']."</div>";
        $varHtml .='</div>';
    }

    mysqli_free_result($resultado);
    $conexion->close();
?>

<script>

        jQuery(document).ready(function() {

            $('#categoria').on('click','.elemento',function() {
               var e = $(this).clone();
               var identificador = $(this).attr("iden");
               $.ajax({url:'selectCategJquery.php',method:'post',data:{"identificador":identificador}});
               var div = $('<div/>', {
                                'class' : 'xClones',
                                'html' : '<span>X</span>'

                            });


               if($("#campoBusq").find("."+identificador).length){
                    $("#campoBusq").find("."+identificador).remove();
                    $(this).parent(".cont-optionElement").removeClass("estilSelectCateg");
                }else{
                    $(e).append(div);
                    $(e).appendTo('#campoBusq');
                    $(this).parent(".cont-optionElement").addClass("estilSelectCateg");
               } 
           });


            $('#campoBusq').on('click','.xClones',function() {
                $(this).parent().remove();
                $( $(".cont-optionElement")[0]).removeClass("estilSelectCateg");
                    // var  $identificador=$_POST['identificador'];
                     // $(".cont-optionElement").find("."+identificador).removeClass("estilSelectCateg");


            });

        });
  </script>

introducir la descripción de la imagen aquí

6
  • Este me funciona $( $(".cont-optionElement")[0]).removeClass("estilSelectCateg")‌​; pero tendria que marcar manualmente las posiciones y busco un tipo contador
    – Gamez
    el 19 mar. 2017 a las 16:58
  • Intente Usando $ajax para pasar la variable desde jquery a php pero no se si esta mal el codigo
    – Gamez
    el 19 mar. 2017 a las 16:58
  • quieres que cuando un elemento de #categoría se clone en #campoBusq, el original aparezca sin estilo?
    – ffflabs
    el 20 mar. 2017 a las 11:57
  • En este codigo hay una funcion que clona como acabas de entender, pues el detalle es que cuando se crea esa clonacion, el elemento de categoria se le añasira un background para indicar que ese elemento esta clonado..( es como un checkbox).. ok ... luego de estar clonado, quiero que; cuando le den click al elemento clonado en #campoBusq, remueva el estilo de categoria
    – Gamez
    el 20 mar. 2017 a las 13:45
  • En qué momento estás declarando $varHtml? Qué hace un llamado ajax por post al mismo script donde estás parado, si no usas nada de su salida?
    – ffflabs
    el 22 mar. 2017 a las 20:11

2 respuestas 2

3

Voy a darte una idea de como resolverlo, probablemente no sea la mejor, pero te puede guiar o puede permitir a otro usuario colaborar más profundamente (con más tiempo).

El objetivo es obtener el índice (posición) del elemento con clase xClones que está siendo seleccionado respecto a todos los demás xClones, y a continuación quitar una clase al elemento con el índice correspondiente entre los elementos con la clase cont-optionElement

Usando entonces jQuery (la única etiqueta en la pregunta), y tomando como base el código que ya tienes:

$('#campoBusq').on('click','.xClones',function() {

  // obtenemos el índice del elemento
  var clonIndex = $('.xClones').index($(this));

  $(this).parent().remove();

  $( $(".cont-optionElement")[clonIndex]).removeClass("estilSelectCateg");

  // ...
}
7
  • se ve mue logico, apenas lo pruebe te respondo
    – Gamez
    el 22 mar. 2017 a las 21:55
  • Amigo ya probe el codigo y funciona pero hace un comportamiento extraño y es que; si seleciono todas las categorias solo se remueven el estilo cuando le doy xclones desde el ultimo que se seleciono al primero es decir; se eliminan de manera desendente
    – Gamez
    el 23 mar. 2017 a las 13:30
  • si trato de quitar los estilos de manera aleatoria algunos me lo remueve y otras no. repito solo se eliminan de manera desendente
    – Gamez
    el 23 mar. 2017 a las 13:31
  • se acaba el tiempo de la recompensa
    – Gamez
    el 23 mar. 2017 a las 14:53
  • 2
    Tal y como te dije, es una idea que puedes tomar como punto de partida, lamentablemente no tengo tiempo en este momento de profundizar más en el tema. Haz un poco de depuración y seguramente podrás terminar de resolverlo.
    – Shaz
    el 23 mar. 2017 a las 14:54
2
+50

Intenta ejecutando esta solución que te propongo, en la cual no uso PHP para crear las categorías, solamente simulo las categorías ya creadas de acuerdo al código que estás planteando.

jQuery(document).ready(function() {

	$('#categoria').on('click','.elemento',function() {
	   var e = $(this).clone();
	   var identificador = $(this).attr("iden");
	   $.ajax({url:'selectCategJquery.php',method:'post',data:{"identificador":identificador}});
	   var div = $('<div/>', {
						'class' : 'xClones',
						'html' : '<span>X</span>'

					});


	   if($("#campoBusq").find("."+identificador).length){
			$("#campoBusq").find("."+identificador).remove();
			$(this).parent(".cont-optionElement").removeClass("estilSelectCateg");
		}else{
			$(e).append(div);
			$(e).appendTo('#campoBusq');
			$(this).parent(".cont-optionElement").addClass("estilSelectCateg");
	   } 
   });


	$('#campoBusq').on('click','.xClones',function() {
    var identificador = $(this).parent("#elementoBusq").attr("iden");		
		$("#categoria").find("." + identificador).parent().removeClass("estilSelectCateg");			
$(this).parent().remove();
	});
});
#campoBusq{
  border-style:solid;
  border-width:1px;
  border-color:blue;
  padding:5px;
}
.estilSelectCateg{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Categorias seleccionadas:</div>
<div id="campoBusq"></div> 
<br />

<div class="mensCateg">Selecione las Categorias:</div>
<div id="cont-categoria" class="centFRH">
        <div id="categoria">
            <div class="cont-optionElement">
              <div id='elementoBusq' class='elemento 1' iden='1' >Categoria 1</div>
            </div>
            <div class="cont-optionElement">
              <div id='elementoBusq' class='elemento 2' iden='2' >Categoria 2</div>
            </div>
            <div class="cont-optionElement">
              <div id='elementoBusq' class='elemento 3' iden='3' >Categoria 3</div>
            </div>            
        </div>
</div>

9
  • No amigo; esto no me srve porque es una pagina donde manejare sentencia de sql desde un usuario ROOT para no estar modificando el codigo .. por ejemplo si yo quiero insertar una nueva categoria lo que hara solamente es crear interfaces que se encarguen de ejecutarlas y listo. entiendes lo que te digo
    – Gamez
    el 24 mar. 2017 a las 13:44
  • Lo que te entiendo es que no te sirve por que las categorías se crean dinámicamente a través de un página destinada para esto (o sea un CRUD). Si esto es correcto, no te preocupes, solo pon el código php de tu vista donde los necesites. Por que el problema que planteas (hasta donde entiendo) es una problematica de css y JavaScript, así que el tema de sentencias SQL no debería ser un impedimento para que esta solución te pueda ayudar en algo. De todas maneras sigamos compartiendo los conceptos, para tratar de solucionar tu inconveniente. el 24 mar. 2017 a las 14:11
  • te digo que el sql si tiene que ver un poquiito no mas y es que; en cada elemento de categoria que se encuentre en sql te mostrara los div el cual hay que asignar identificadores para poder identificarlos y que al darle click se elimine el estilo pero solo el que coincida con su identificador, me entiendes este punto en donde el sql esta un poco relacionado
    – Gamez
    el 24 mar. 2017 a las 15:16
  • Correcto, entonces tú lo que debes hacer es que la porción del HTML donde tengo las categorías preestablecidas lo reemplazas con tú código PHP include("selectCategJquery.php");. Yo no pongo ese código en la respuesta es para que tú puedas ver como está funcionando la solución cuando le das click al botón ´Ejecutar´ al final de la respuesta. Por que si ejecutas la respuesta podrás visualizar como funciona la solución que te propuse. el 24 mar. 2017 a las 16:23
  • Funciono perfectamente mano gracias pero ahora tengo una confucion sobre la variable que se creo nuevamente
    – Gamez
    el 24 mar. 2017 a las 16:42

Tu Respuesta

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

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