Pasar variable jquery a otra función

Hola estoy intentando pasar una variable de una función a otra para poder hacer uso de ella.

Esta es la primera función donde obtengo envio a través de keyup y lo quiero mandar a la siguiente función.

$('body').on( 'keyup','.inputcalculo', function(e) {
        var fila = $(this).parents('tr');
        var cantidad = $(fila).find('.cntComprada').val();
        if(cantidad == 'undefined'){
          cantidad = 0;
        }
        var precio = $(fila).find('.ePrecioUnid').val();
        if(precio == 'undefined'){
          precio = 0;
        }
        
        var envio = $('#elEnvio').val()
        if(envio == 'undefined'){
        envio = 0;
        return envio;
        }

        fila.find('.eSubTotal').val(Math.round(cantidad * precio * 100) / 100);
        actualizarTotales();
    });

Esta es la siguiente función pero me devuelve todo el rato undefined:

function actualizarTotales(envio){
        var tabla = $('#tabla');
        var subtotal = 0;
        var iva = 0;
        var total = 0;
        $(tabla).find('.eSubTotal').each(function(index, value){
          var valor = $(value).val();
          if( !isNaN(parseFloat(valor))){ // NaN = Not a number
            subtotal += parseFloat(valor);
          }
        });
        
        console.log(envio);
        iva = subtotal * 21 / 100;
        total = subtotal + iva;
        $('#subtotal').val(Math.round(subtotal * 100) / 100);
        $('#iva').val(Math.round(iva * 100) / 100);
        $('#total').val(Math.round(total * 100) / 100);
    }

javascript – Cerrar div seleccionado con JQuery crear categorías

hoy tengo una pregunta un tanto complicada de explicar… yo estoy sacando los siguientes elementos con this a través de mi consola.

fila-0 di-true colapsable-1
fila-1 nocolapsable-2
fila-2 nocolapsable-3
fila-3 di-true colapsable-4
fila-4 nocolapsable-5
fila-5 di-true colapsable-6

Mi problema es el siguiente tengo que hacer categorías con esos al hacer click en un elemento con la clase llamada “cerrar” debe colapsarse ese elemento, pero la pregunta es, como creo los grupos? como lo recorro?

El funcionamiento que debería tener es el siguiente, ahora mismo lo muestra en orden si tiene la clase colapsable-* es la categoría por lo que todo elemento que esté debajo y tenga la clase nocolapsable pertenecería a ese grupo, en cuanto se tope con otro colapsable-* sería otra categoría y así sucesivamente… quedaría de la siguiente forma.

Categoría 1

fila-0 di-true colapsable-1
fila-1 nocolapsable-2
fila-2 nocolapsable-3

Categoría 2

fila-3 di-true colapsable-4
fila-4 nocolapsable-5

Categoría 3

fila-5 di-true colapsable-6

La cuestión es que no se recorrer la información que tengo para hacer la funcionalidad que al dar click se oculte o muestre la información ya que tengo que hacer un toogle. Muchas gracias!

jquery – Woocommerce checkout page reload on up dating shipping method

I got 3 shipping method
free
local pick up
flat rate

I got a small jquery function to determind when ever i should show/hide free shipping method, it works but, when i get to the checkout page i have everyhing hidden regarding shipping method, user selects an option and based on that it will display all or few shipping method, when the option “non free” is selected from a checkbox it hides the free shipping and show the rest, but when user select flat rate or pick up method something seems to reload and basically remove my script and let free shipping vissible

<script>
      $(".checkboxClass").change(function(){
if (selectedName == "nonFree") {
 
    $(" #shipping_method_0_free_shipping7").parent().hide(); 
  $(" #shipping_method_0_free_shipping7").parent().addClass("hideMe");
    }
  else 
    {
      $(" #shipping_method_0_free_shipping7").parent().show(); 
       $(" #shipping_method_0_free_shipping7").parent().removeClass("hideMe");
       
      
    }
  });
  </script>

php – Jquery envio de informacion a sql

tenog un problema, estoy con un codigo en el cual envio datos a sql por php mediante jquery, eh puesto unos alert para ver la info que me manda, y es correcta, pero cuando lo inserta en la sql, me pone otra cosa.

var dpt_id = $('#dpt_id option:selected').html();   
alert(dpt_id);

introducir la descripción de la imagen aquí

y cuando lo inserta en la SQL aparece esto:

introducir la descripción de la imagen aquí

el codigo php que recibe los datos es:

$dpt=$_POST('dpt_id');

y el insert pues un insert normal y corriente
$sql=”INSERT into codigos (Fila,colum,dpt_d……..

la estructura de la SQL, es un campo INT(11) sin mas, a alguien se le ocurre que puede pasar?

gracias
introducir la descripción de la imagen aquí

javascript – Iterate through multiple elements with different IDs in jQuery

// selecting elements
$('#0')
  .find('.cart-quantity-input')
  .change(function () {
    var quantity = parseFloat($('#0').find('.cart-quantity-input').val());
    var price = parseFloat(
      $('#0').find('.cart-price').text().replace('€', '')
    );

    $('#0')
      .find('.cart-subtotal')
      .text(quantity * price + '€');
  });

$('#1')
  .find('.cart-quantity-input')
  .change(function () {
    var quantity = parseFloat($('#1').find('.cart-quantity-input').val());
    var price = parseFloat(
      $('#1').find('.cart-price').text().replace('€', '')
    );

    $('#1')
      .find('.cart-subtotal')
      .text(quantity * price + '€');
  });

$('#2')
  .find('.cart-quantity-input')
  .change(function () {
    var quantity = parseFloat($('#2').find('.cart-quantity-input').val());
    var price = parseFloat(
      $('#2').find('.cart-price').text().replace('€', '')
    );

    $('#2')
      .find('.cart-subtotal')
      .text(quantity * price + '€');
  });

// compute subtotal sum
function subTotal(element) {
  var quantity = element.siblings('.cart-quantity-input').val();
  var price = parseFloat(
    element.closest('.cart-row').find('.cart-price').text().replace('€', '')
  );

  $(element)
    .closest('.cart-row')
    .find('.cart-subtotal')
    .text(price * quantity + '€');
}

// compute total sum and number of items
function computeTotalValues() {
  var total = (...$('.cart-items .cart-subtotal'))
    .map((subtotalElm) => Number(subtotalElm.textContent.replace('€', '')))
    .reduce((a, b) => a + b, 0);

  $('.cart-total-price').text(total + '€');

  const totalQuantity = $.map(
    $('.cart-items .cart-quantity-input'),
    (input) => +input.value
  ).reduce((a, b) => a + b, 0);

  $('.items-number').text(totalQuantity + ' items');
}

// increase number of items
$('.plus').on('click', function () {
  var increment = parseInt($(this).siblings('input').val());

  increment++;
  $(this).siblings('input').val(increment);
  subTotal($(this));
  computeTotalValues();
});

// decrease number of items
$('.minus').on('click', function () {
  var decrement = parseInt($(this).siblings('input').val());

  if (decrement) {
    decrement--;
  }
  $(this).siblings('input').val(decrement);
  subTotal($(this));
  computeTotalValues();
});

// checkout button clicked
$('.btn-primary').on('click', function () {
  if (
    confirm('Are you sure you want to checkout? nYour products will disappear')
  ) {
    $('.cart-total-price').text('0 €');
    $('.items-number').text('0 items');
    $('.cart-quantity-input').val('0');
  }
});
* {
  box-sizing: border-box;
  font-family: sans-serif;
  color: #777;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: #261741;
}

.container {
  display: flex;
  width: 55%;
  min-width: 700px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 50px;
  min-height: 500px;
}

.first-section {
  background-color: #ffffff;
  position: relative;
  width: 70%;
  padding-left: 40px;
  padding-top: 10px;
}

.second-section {
  background-color: #f3f3f3;
  position: relative;
  width: 30%;
  padding: 10px 20px 20px 20px;
}

.section-header {
  font-weight: bold;
  color: #333;
  font-size: 18px;
}

.summary-title {
  display: flex;
}

.cart-items {
  margin-bottom: 60px;
}

.btn {
  text-align: center;
  vertical-align: middle;
  padding: 0.67em 0.67em;
  cursor: pointer;
}

.btn-primary {
  color: white;
  position: absolute;
  background-color: #9100ff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  display: block;
  font-size: 16px;
  bottom: 20px;
  width: 83%;
}

.btn-primary:hover {
  background-color: #000099;
}

.main-line {
  margin-right: 20px;
}

.cart-header {
  font-weight: bold;
  font-size: 15 px;
}

.cart-column {
  display: flex;
  align-items: center;
  color: black;
  margin-right: 1.5em;
  padding-bottom: 10px;
  margin-top: 10px;
}

.cart-column-title {
  display: flex;
  align-items: center;
  color: lightgray;
  margin-right: 1.5em;
  padding-bottom: 10px;
  margin-top: 10px;
}

.cart-row {
  display: flex;
}

.cart-item {
  width: 55%;
  font-size: 14px;
  text-transform: uppercase;
}

.cart-price {
  display: flex;
  justify-content: center;
  width: 15%;
  font-size: 14px;
  text-transform: uppercase;
}

.cart-quantity {
  display: flex;
  justify-content: center;
  width: 15%;
  font-size: 14px;
  text-transform: uppercase;
}

.cart-subtotal {
  display: flex;
  justify-content: center;
  width: 15%;
  font-size: 14px;
  text-transform: uppercase;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.cart-item-title {
  color: #bc6cff;
  margin-left: 10px;
  font-size: 15px;
  font-weight: bold;
}

.cart-item-description {
  color: lightslategray;
  margin-left: 10px;
  font-size: 10px;
}

.cart-item-image {
  width: 75px;
  height: auto;
  border-radius: 10px;
}

.cart-quantity-input {
  height: 34px;
  width: 34px;
  border-radius: 5px;
  border: 2px solid lightgray;
  color: #333;
  padding: 0;
  text-align: center;
  font-size: 1.2em;
  margin-right: 15px;
  margin-left: 15px;
}

.cart-row:last-child .cart-column {
  border: none;
}

.cart-total {
  text-align: end;
  margin-top: 10px;
  margin-right: 10px;
}

.cart-total-title {
  font-size: 14px;
  color: black;
  margin-right: 20px;
  text-transform: uppercase;
}

.cart-total-price {
  color: #333;
  font-size: 1.1em;
}

.numerical-values {
  color: #bc6cff;
  font-size: 34px;
}

.numerical-values:hover {
  cursor: pointer;
}

.items-number {
  display: flex;
}

.items-and-total {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 17px 0px 0px 17px;
}

.items-and-total-final {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 0px 0px 0px;
}

.items-discount {
  display: flex;
  text-transform: uppercase;
  padding-top: 15px;
}

.final-part {
  margin-bottom: 70px;
  bottom: 0px;
  position: absolute;
  width: 82%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Shopping cart</title>
    <meta name="description" content="This is the description" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="first-section">
        <h2 class="section-header">Shopping cart</h2>
        <hr class="main-line" />
        <div class="cart-row">
          <span class="cart-item cart-header cart-column-title"
            >Product details</span
          >
          <span class="cart-quantity cart-header cart-column-title"
            >Quantity</span
          >
          <span class="cart-price cart-header cart-column-title">Price</span>
          <span class="cart-subtotal cart-header cart-column-title">Total</span>
        </div>
        <div class="cart-items">
          <div class="cart-row" id="0">
            <div class="cart-item cart-column">
              <img
                class="cart-item-image"
                src="Images/goku.png"
                width="100"
                height="100"
              />
              <div class="item-info">
                <span class="cart-item-title">Goku POP</span>
                <span class="cart-item-description">Product code GOKU</span>
              </div>
            </div>
            <div class="cart-quantity cart-column">
              <div class="numerical-values minus">-</div>
              <input
                class="cart-quantity-input"
                disabled
                type="text"
                value="0"
              />
              <div class="numerical-values plus">+</div>
            </div>
            <span class="cart-price cart-column">5€</span>
            <span class="cart-subtotal cart-column">0€</span>
          </div>
          <div class="cart-row" id="1">
            <div class="cart-item cart-column">
              <img
                class="cart-item-image"
                src="Images/naruto.png"
                width="100"
                height="100"
              />
              <div class="item-info">
                <span class="cart-item-title">Naruto POP</span>
                <span class="cart-item-description">Product code NARUTO</span>
              </div>
            </div>
            <div class="cart-quantity cart-column">
              <div class="numerical-values minus">-</div>
              <input
                class="cart-quantity-input"
                id="naruto"
                disabled
                type="text"
                value="0"
              />
              <div class="numerical-values plus">+</div>
            </div>
            <span class="cart-price cart-column">20€</span>
            <span class="cart-subtotal cart-column">0€</span>
          </div>
          <div class="cart-row" id="2">
            <div class="cart-item cart-column">
              <img
                class="cart-item-image"
                src="Images/luffy.png"
                width="100"
                height="100"
              />
              <div class="item-info">
                <span class="cart-item-title">Luffy POP</span>
                <span class="cart-item-description">Product code LUFFY</span>
              </div>
            </div>
            <div class="cart-quantity cart-column">
              <div class="numerical-values minus">-</div>
              <input
                class="cart-quantity-input"
                id="luffy"
                disabled
                type="text"
                value="0"
              />
              <div class="numerical-values plus">+</div>
            </div>
            <span class="cart-price cart-column">7.5€</span>
            <span class="cart-subtotal cart-column">0€</span>
          </div>
        </div>
      </div>
      <div class="second-section">
        <div class="cart-total">
          <h2 class="section-header summary-title">Order Summary</h2>
          <hr />
          <div class="items-and-total">
            <span class="items-number">0 items</span>
            <span class="cart-total-price">0€</span>
          </div>
          <hr />
          <div class="final-part">
            <hr />
            <div class="items-and-total-final">
              <div class="cart-total-title">Total cost</div>
              <span class="cart-total-price">0€</span>
            </div>
          </div>
        </div>
        <button class="btn btn-primary" type="button">Checkout</button>
      </div>
    </div>
  </body>
  <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"
  ></script>
  <script src="store.js" async></script>
</html>

javascript – como pega um valor do jquery e guarda em uma variavel?

Estou querendo fazer uma soma de todas a notas com input,adicionados pelo jquery,só que não consigo pega valores do jquery quando eu aperto no botão ‘+’,queria saber como posso pega os valores do jquery quando eu aperto no botão mais e digito um número,para colocar esse valor em uma variavel.

inserir a descrição da imagem aqui
Click para ver a imagem em seu tamanho original

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ex001</title>
  <script src=" https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <style>
    .qtd {
      margin-top: 5px;
    }
  </style>



</head>

<body>
  <h2>Média de notas</h2>


  <div id="form">
    <input type='number' class="qt" id="qt1" placeholder="Nota">

    <input type="button" class='botão' id="b" value="+">




    <input type="button" class='finalizar' value='Finalizar' onclick="finalizar()">



    <script>
      $('#b').click(function() {
        var gua = $('#form').append('<input type="text" class="qta" id="qtd" placeholder="Nota"> ').val()
        window.alert(gua)



      })

      function finalizar() {





      }
    </script>

</body>

</html>

Is JQuery in chrome extension a security concern?

This is the relevant part of my manifest.json file:

"content_scripts": [
    {
      "css": ["style.css"],
      "matches": [
        "<all_urls>"
      ],
      "js": ["jquery-3.5.1.min.js", "content.js""]
    }
  ]

I noticed that now I have jquery on every page I go to and I was wondering if it’s a security concern.
I don’t do anything fishy but I wonder whether some sites could try to exploit having jquery in scope.

My extension is supposed to work on every page so I can’t blacklist certain sites.

I downloaded jquery from the official CDN once and it’s now in my extension.

javascript – Create a button function in another aspx page using jQuery

Stack Exchange Network


Stack Exchange network consists of 176 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Problema al navegar por elementos dinamicos en jquery

tengo varios input a modo de formulario con su respectivo label, tengo una funcion que al hacer foco en el input o perderlo, se añade una clase al label para que tome una pequeña animacion y cambie de tamaño. Funciona todo correcto, excepto con los input que se generan de forma dinamica con ajax.

Las funciones listado_comunas y listado_regiones, generan un select segun una consulta a una base de datos, por lo que es con estos elementos dinamicos que no logro ejecutar la funcion.

Adjunto el formulario como esta implementado y la funcion en jquery.

<div class="row justify-content-center formularios-sesion">
    <div class="col-lg-12 col-md-9 col-sm-10 col-12 p-3 form-sesion" id="form-cuenta">
        <a href="<?php echo $raiz;?>"><img src="<?php echo $raiz;?>imagenes/logo-blanco.png" alt=""></a>
        <h2 class="linea"><span>CREAR CUENTA</span></h2>
        <div class="form-row">
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="nombre">NOMBRE<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="nombre" id="nombre" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="apellido">APELLIDO<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="apellido" id="apellido" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>      
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="rut">RUT<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="rut" id="rut" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>      
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="telefono">TÉLEFONO<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="telefono" id="telefono" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>                                                                          
            <div class="col-xl-6 col-lg-12 col-md-12 mb-2">
                <label for="direccion">DIRECCIÓN<i class="icon-dot-single text-danger"></i></label>
                <input type="text" class="form-control form-control-log" name="direccion" id="direccion" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();">
            </div>  
            <div class="col-xl-6 col-lg-12 col-md-12 mb-2 input_region">
                <label for="nombre">APELLIDO<i class="icon-dot-single text-danger"></i></label>
            </div>
            <div class="col-xl-6 col-lg-12 col-md-12 mb-2 input_comuna"></div>
            <div class="col-xl-6 col-lg-12 col-md-12 mb-2">
                <label for="correo">CORREO<i class="icon-dot-single text-danger"></i></label>
                <input type="email" class="form-control form-control-log" name="correo" id="correo" style="text-transform:lowercase;" onkeyup="javascript:this.value=this.value.toLowerCase();">
            </div>  
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="registrar_clave">CONTRASEÑA<i class="icon-dot-single text-danger"></i></label>
                <input type="password" class="form-control form-control-log" name="registrar_clave" id="registrar_clave">       
                <i class="icon-eye mostrar-clave ver-clave"></i>                            
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                <label for="repetir_clave">REPETIR CONTRASEÑA<i class="icon-dot-single text-danger"></i></label>
                <input type="password" class="form-control form-control-log" name="repetir_clave" id="repetir_clave">   
                <i class="icon-eye mostrar-clave ver-repetir-clave"></i>                                        
            </div>  
            <div class="col-12"></div>
            <div class="col-sm-6 mt-3">
                <button class="btn btn-success w-100 mt-2" id="registrar-usuario">Registrar</button>
            </div>                                                          
        </div>                                  
        <p class="pt-2 text-white mensaje_nuevo_usuario" style="-webkit-user-select:text;-moz-user-select:-moz-text; -ms-user-select:text;user-select:text"></p>                        
    </div>
</div>  

Funcion en Jquery

$(document).ready(function () {
        listado_regiones();
        listado_comunas();  
        
        $(".formularios-sesion").find("input, textarea, select").on("blur focus", function (e) {
            var $this = $(this), label = $this.prev("label");           
            if (e.type === "focus") {   
                label.addClass("active");               
            }else if (e.type === "blur") {
                if($this.val() === "") {
                    label.removeClass("active");
                }else{
                    label.addClass("active");
                }
            }
        });         
    }); 

html – ordenar divs con jquery

// Ordena los productos ascendentemente y descententemente //

$('.container_loader').hide();

    var product = $('.producto');

    function order_motorcycle(){ // Ordenar ascendentemente //
    product.sort(function(a, b){
    return a.textContent > b.textContent ? 1 : -1;
    }).appendTo('.right_section');
    } order_motorcycle();

    $('#order_products').change(function(){
    
    product.hide().delay(3000).fadeIn(3000); // <-- Si elimino esto, se resuelve mi problema //
    
    $('.container_loader').fadeIn(1000).delay(2000).fadeOut();

    if($('option:nth-of-type(2)').is(':selected')){
    
    product.sort(function(a,b){ // Ordena descendentemente //
    return a.textContent < b.textContent ? 1 : -1;
    }).appendTo('.right_section');
    } else {
    order_motorcycle();
    }
      });
      
      function buscar() {
    var buscador = $('#buscador').val().toLowerCase();
    var not_found = true;
    var listCategory = '';
    $('.producto span').each(function () {
        var name_products = $(this).text().toLowerCase();
        if (name_products.indexOf(buscador) !== -1) {
            var category_products = $(this).parents('.producto').attr('category');
            $(this).parents('.producto').show();
            not_found = false;
            listCategory += category_products; 
            //Concateno todo lo que se vaya a mostrar en una sola variable y la valido al final.
        }
        else {
            $(this).parents('.producto').hide();
        }

        if (!not_found) {
            $('#text').hide();
        } else {
            $('#text').show();
            $('.btn-check').prop('checked', false);
        }

    });
    if (listCategory.length > 0) {//Aqui hare la validación de tus checkbox
        $('.btn-check').each(function () {
            var check = $(this).attr('category');
            if (listCategory.indexOf(check) !== -1) {
                $(this).prop('checked', true);
            } else {
                $(this).prop('checked', false);
            }
        });
    }
}
$('#buscador').on('keypress', function (e) {
    if (e.keyCode == 13) {
        buscar();
    }
});

// Buscador //
$('#button_search').on('click', function () {
    buscar();
});

// Casillas checkbox //
$('.btn-check').prop('checked', true);
$('#apply_filter').on('click', function () {
    $('.producto').hide();
    $('#text').hide();
    $('.btn-check:checked').each(function () {
        var input_category = $(this).attr('category');
        $('.producto(category*="' + input_category + '")').show();

    });
});

$('#all').on('click', function () {

    if ($('#all').is(':checked')) {
        $('.btn-check:not(#all)').prop('checked', true);
    } else if ($('#all').not(':checked')) {
        $('.btn-check:not(#all)').prop('checked', false);
    }

});
    
body{
display: flex;
}
.left_section{
width: 30%;
background: #cdcdcd;
}
.left_section select{
display: block;
margin: auto;
font-size: 1.65em;
}
.right_section{
width: 70%;
background: #ededed;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.producto{
width: 25%;
text-align: center;
background: #cdcdcd;
display: table;
}
img{
width: 100%;
}
.container_loader{
display: none;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
.loading{

display: flex;
justify-content: center;
align-items: center;
}
.loader{
width: 35px;
height: 35px;
background: transparent;
border-radius: 50%;
border: 3.5px solid;
border-right-color: #CDCDCD;
border-top-color: #CDCDCD;
border-bottom-color: #CDCDCD;
animation: spin .5s linear infinite;
margin-right: 1%;
}
@keyframes spin {
0%{
    background-color:transparent;
    transform: rotate(360deg);
}
    }
#text{
font-size: 2vw;
position: relative;
padding: 25%;
display: none;
}
.category{
display: block;
}
.category input,
.category label{
cursor: pointer;
font-size: 1.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<aside class="left_section">

    <select id="order_products">
        <option>Ordenar ascendentemente</option>
        <option>Ordenar descendentemente</option>
    </select>
    <input type="text" id="buscador" placeholder="Buscar moto..." maxlength="36">
    <button id="button_search">Buscar</button>
    <span class="category"><input type="checkbox" class="btn-check" id="all" category="all"><label for="all">All</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="verde" category="verde"><label for="verde">moto de color verde</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="rojo" category="rojo"><label for="rojo">moto de color rojo</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="blanco" category="blanco"><label for="blanco">moto de color blanco</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="gris" category="gris"><label for="gris">moto de color gris</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="negro" category="negro"><label for="negro">moto de color negro</label></span>
    <button id="apply_filter">Aplicar filtro</button>

</aside>

<aside class="right_section">

<div class="producto" category="all gris"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ninja-H2R.jpg"><span>Moto Rfa 2000</span></div>

<div class="producto" category="all verde"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ZX-10RR_g.jpg"><span>Sudora KFI</span></div>

<div class="producto" category="all blanco"><img src="https://as.com/betech/imagenes/2017/10/13/portada/1507918164_397427_1507918224_noticia_normal.jpg"><span>Z-moto 6000 turbo</span></div>

<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Hirasc 300k</span></div>

<div class="producto" category="all rojo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTt-wqMoSBYFaR6dIJE9a02yMmQJl6AUYrYnQ&usqp=CAU"><span>Az Mini-Inferno 10000</span></div>

<div class="producto" category="all gris"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAk-Q8UCYkf4YBLwh6QZr1yx-gB8mbn0Hh9Q&usqp=CAU"><span>Droma T legacy</span></div>

<div class="producto" category="all blanco"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRcHyCIrQoZjVqudofBdi_qh9wGiRJfdpbZxw&usqp=CAU"><span>KazaQ Op</span></div>

<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Marine T-5000</span></div>

<div class="container_loader">
<div class="loading">
    <div class="loader"></div>
    <p>Cargando productos...</p>
</div>
</div>

<p id="text">No se encontraron resultados...</p>

</aside>

Hola a todos, tengo un pequeño problema para ordenar divs , si haces clic en un option, te ordena segun lo que dice el option, ahora para ordenar seleccione todos los div con clase producto, y los ordene segun su texto, le agregue un efecto, que se oculte por 3 seg (lo que dura en aparecer el loading) y que luego me genere un fadeIn, si elimino este efecto, se resuelve el problema, me ordena segun el filtro que tenga, es decir, si tiene marcadas las casillas de moto de color gris y moto de color blanco, y luego le das en ordenar ascendentemente o lo contrario a esta, te los ordena normal, solo si le quitas product.hide().delay(3000).fadeIn(3000); , ahi viene mi problema, ¿Cómo hago para que me ordene normal teniendo este efecto? , es decir, que los productos mostrados dependiendo de las casillas marcadas, o los productos buscados en el input text se ordenen teniendo el efecto antes mencionado. Gracias de antemano.