position content according to the election

Question

position content according to the election

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I have a little problem when positioning elements; that is, I want to click on a inputs radio show me x content according to the value that corresponds. For this I add the same name to all input radio because I only want to choose an option. Here is the code of what I try to do

var saleType=function (){//funcion para la seleccion
  var category =$("input[name=selector]:checked").val();

  
 if (category=="truck") {

  alert(category)

   $("#truck").show()

}else if(category=="bike"){
   alert(category)

   $("#bike").show()

}else if(category=="plane"){
   alert(category)

    $("#plane").show()

}else if(category=="boat"){
   alert(category)

     $("#boat").show()
}else if(category=="car"){
   alert(category)

     $("#car").show()
}
}

//ejecutar funcion
  $(document).on("click","input[name=selector]",function(){
         saleType()
          
     })

.progress-bar {
    
    overflow: hidden;
    font-size: 9px;
    position: absolute;
    display: none;
    background:#fff;
    width:50%;
    height:100px;

}
div{
  position:relative;
  width:60%;
  background:lightgrey;
  height:300px;

}
ul{

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <!--estos radio al clikear me tienen que mostrar los ul segun el valor-->


     <fieldset>
      <input type="radio" id="Vehicle" name="selector" value="truck">
      <input type="radio" id="Vehicle" name="selector" value="car">
      <input type="radio" id="Vehicle" name="selector" value="bike">
      <input type="radio" id="Vehicle" name="selector" value="plane">
      <input type="radio" id="Vehicle" name="selector" value="boat">
     </fieldset>
     
     <br>
 <div>   
     <ul id="truck" class="progress-bar bg-light mt-1 p-4 " >
           <h1>truck</h1>
      </ul>
    
       <ul id="car" class="progress-bar bg-light mt-1 p-4 " >
          <h1>car</h1>
       </ul>
       
     <ul id="bike" class="progress-bar bg-light mt-1 p-4 " >
         <h1>bike</h1>
      </ul>
    
      <ul id="plane" class="progress-bar bg-light mt-1 p-4 " >
         <h1>plane</h1>
       </ul>
    
    <ul id="boat" class="progress-bar bg-light mt-1 p-4 " >
        <h1>boat</h1>
    </ul>

  </div>

This works half-heartedly, because when I try to re-show the content according to the value it fails me, what I want is that if I click on any of the radio inputs always show me its corresponding content.

EYE: I could do it in the following way and it would work but I want something more efficient and less tedious

 if (category=="truck") {

   $("#truck").show()
   $("#bike").hide()
   $("#car").hide()
   $("#plane").hide()
   $("#boat").hide()

}etc......

jquery

asked by andy gibbs 30.09.2018 в 21:51

source

2 answers

1

You could take advantage of the value of your inputs equal to the ID of the ul you want to display or hide:

$('input').change(function () {
    $('.progress-bar').hide();
    $('#' + $(this).val()).show();
});

This way I am associating a change event with all input . When a input changes, what it will do is hide all elements with class progress-bar (class that share the ul that you want to show or hide ) and then it would show only the one that corresponded to the radio selected, taking advantage of the value of this and concatenating a '#' so that the selector accesses to the ID .

answered by 01.10.2018 в 10:26

Show different rows in the same query Know if it is an image or PHP link

score 3 · Accepted Answer

One option may be to use attributes data- * , that way, you could assign a parameter to solve your problem with a each and a if

I leave you a snippet of how I would implement it

//Agrego un listener si los radios cambian 
$('input[name="selector"]').on('change', ()=>
{
    //Obtengo el valor de el radio elegido
    var categoria = $('input[name=selector]:checked').val();
    
    //Por cada elemento que tenga clase progress-bar
    $('.progress-bar').each(function(e){
        
        //Chequeo si el valor de data-val es igual al radio seleccionado, cuyo caso, lo muestro
        if($(this).data('val')===categoria)
        {
            $(this).show();            
        }
        //caso contrario, oculto.
        else
        {
            $(this).hide();
        }

    });

});

.progress-bar {
    
    overflow: hidden;
    font-size: 9px;
    position: absolute;
    display: none;
    background:#fff;
    width:50%;
    height:100px;

}
div{
  position:relative;
  width:60%;
  background:lightgrey;
  height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <fieldset>
          <input type="radio" id="Vehicle" name="selector" value="truck">
          <input type="radio" id="Vehicle" name="selector" value="car">
          <input type="radio" id="Vehicle" name="selector" value="bike">
          <input type="radio" id="Vehicle" name="selector" value="plane">
          <input type="radio" id="Vehicle" name="selector" value="boat">
</fieldset>
         
         <br>
     <div>
          
         <!--Observar que cada ul tiene un data-val igual al value de los radiobuttons.-->
         <ul id="truck" class="progress-bar bg-light mt-1 p-4" data-val="truck">
               <h1>truck</h1>
          </ul>
        
           <ul id="car" class="progress-bar bg-light mt-1 p-4" data-val="car" >
              <h1>car</h1>
           </ul>
           
         <ul id="bike" class="progress-bar bg-light mt-1 p-4" data-val="bike">
             <h1>bike</h1>
          </ul>
        
          <ul id="plane" class="progress-bar bg-light mt-1 p-4" data-val="plane">
             <h1>plane</h1>
           </ul>
        
        <ul id="boat" class="progress-bar bg-light mt-1 p-4" data-val="boat" >
            <h1>boat</h1>
        </ul>
        </div>

Edit a possibility, if you want to reduce the code a bit more, is to use a function that receives a boolean and hence determines the visibility, it would be something like this

$('input[name="selector"]').on('change', ()=>
{
    var categoria = $('input[name=selector]:checked').val();
    
    $('.progress-bar').each(function(e){    


        $(this).setVisibility($(this).data('val')==categoria);

    });
});

jQuery.fn.extend({
  setVisibility: function(e) {
    if(e===true)
    {
        this.show();
    }
    else
    {
        this.hide();
    }
    
  }});