0

Tengo una consulta como puedo hacer para que en vez que se muestren y oculten los input tipo number se muestren y oculten los slider de Jquery UI.

Osea Reemplazar inputs por Sliders

dejo código ...

  $( function() {
    $( "#slider" ).slider();
    $( "#slider2" ).slider();
    $( "#slider3" ).slider();
    $( "#slider4" ).slider();
    $( "#slider5" ).slider();
    $( "#slider6" ).slider();
  } );


 var ctr = 0;
        var ctr_bdra = 0;
        var init = 0;
        var contenedor = $(".inputs");
        var edad = $(".edad_hidden");
        var edades;

        $(".agregar").click(function(e){            
            add_control(contenedor);
            $(".agregar, .nth").hide(); 
            e.preventDefault();

        });


        $(document).on('click', 'button.agregar_in', function(e){
            if($(".ed").val() == "")
            {
                return false;

            }else{
                add_control(contenedor);
                ctr_bdra = 1;
                if(ctr_bdra > 0){
                    $(this).hide();
                    
                    $(this).next().hide();
                }

            }
            e.preventDefault();

        });

        $(document).on('click', 'button.eliminar_in', function(e){ 
            array = $(".edad_hidden").val().split(',');
            array.pop();
            $(".edad_hidden").val(array);
            var node = $(this).parent();
            node.remove();
            if(!$(".btun").is(":visible")){
                $(".agregar, .nth").show();
            }           
            $('button.agregar_in').last().show();
            
            $('button.eliminar_in').last().show();
            e.preventDefault();
        });

        $(document).on('keyup','.ed', function() {
            var info = [];
            $('.ed').each(function(){ info.push($(this).val()); });
            $(".edad_hidden").val(info);
        });


        function add_control(contenedor){
            ctr = ctr + 1;
            contenedor.append('<div class="btun"><input type="number" min="0" class="ed" name="edades[]" value=""  id="tb' + ctr + '' +'"/>'+
                              '<button class="agregar_in">+</button>'+
                              '<button class="eliminar_in">-</button></div>');
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="slider" style="width:500px;background:red"></div>

    <form method="post">
      <p class="nth" style="display: inline-block;">Agregar</p>
      <button class="agregar">+</button>
      <div class="inputs"></div>
      <input type="hidden" value  class="edad_hidden"></input>   
     <!-- <input type="submit" value="enviar" /> -->
    </form>

1 respuesta 1

0

Edito con tu comentario, en ese caso, en el contenedor.append añade el slider y cuando pulses el botón "+" llama al método .slider() para crearlo. Aprovecha que tienes la variable ctr para asignarles un id a cada slider para poder seleccionarlos individualmente.

   $( function() {
    $( "#slider" ).slider();
  } );


 var ctr = 0;
        var ctr_bdra = 0;
        var init = 0;
        var contenedor = $(".inputs");
        var edad = $(".edad_hidden");
        var edades;

        $(".agregar").click(function(e){            
            add_control(contenedor);
            $(".agregar, .nth").hide(); 
            e.preventDefault();

        });


        $(document).on('click', 'button.agregar_in', function(e){
            if($(".ed").val() == "")
            {
                return false;

            }else{
                add_control(contenedor);
                ctr_bdra = 1;
                if(ctr_bdra > 0){
                    $(this).hide();
                    
                    $(this).next().hide();
                }
								$( ".slid" ).slider();
            }
            e.preventDefault();

        });

        $(document).on('click', 'button.eliminar_in', function(e){ 

            array = $(".edad_hidden").val().split(',');
            array.pop();
            $(".edad_hidden").val(array);
            var node = $(this).parent();
            node.remove();
            if(!$(".slid").is(":visible")){
                $(".agregar, .nth").show();
            }           
            $('button.agregar_in').last().show();
            
            $('button.eliminar_in').last().show();
            e.preventDefault();
        });

        $(document).on('keyup','.ed', function() {
            var info = [];
            $('.ed').each(function(){ info.push($(this).val()); });
            $(".edad_hidden").val(info);
        });


        function add_control(contenedor){
            ctr = ctr + 1;
            console.log(ctr);
            contenedor.append('<div id="slider'+ctr+'" class="slid" style="width:500px;background:red">'+
                              '<button class="agregar_in">+</button>'+
                              '<button class="eliminar_in">-</button></div>');
        }
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="slider" style="width:500px;background:red"></div>

    <form method="post">
    <br/>
      <p class="nth" style="display: inline-block;">Agregar</p>
      <button class="agregar">+</button>
      <div class="inputs"></div>
      <input type="hidden" value  class="edad_hidden"></input>   
     <!-- <input type="submit" value="enviar" /> -->
    </form>

1
  • NO ESO NO QUIERO , LO QUE QUIERO es : ese slider aparezca en vez de los inputs , osea cuando doy clic en el boton agregar sale un slider luego doy clic en el boton + agrega o muestra otro slider , y asi sucesivamente , muestra varios sliders
    – Richard
    Commented el 20 may. 2018 a las 20:15

Tu Respuesta

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

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