Remove style from a clone depending on your Position (Jquery)

Question

Remove style from a clone depending on your Position (Jquery)

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Only detail: How to remove style from the cloned elements in #campoBusq to its originating element? what is in:

# catheory > .cont-optionElement> .element ". $ counter.

What methods could I take for this problem?

User Template.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>

jquery

asked by Gamez 19.03.2017 в 17:57

source

2 answers

2

I'll give you an idea of how to solve it, it probably is not the best, but it can guide you or it can allow another user to collaborate more deeply (with more time).

The objective is to obtain the index (position) of the classy element xClones that is being selected with respect to all the other xClones , and then remove a class from the element with the corresponding index between the elements with the class cont-optionElement

Using jQuery then (the only tag in the question), and based on the code you already have:

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

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

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

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

  // ...
}

answered by 22.03.2017 в 18:50

Error using a constructor in python 2.7 Install ClosedXML in hosting

score 0 · Accepted Answer

Try running this solution that I propose, in which I do not use PHP to create the categories, I only simulate the categories already created according to the code that you are proposing.

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>