2

Tengo una selección múltiple y me gustaría poder hacer clic en ella para manejar las respuestas en una página /getmatch. Por el momento no tengo ninguna señal visual de que he seleccionado cosas:

introducir la descripción de la imagen aquí

Entonces ¿cómo hacer que la selección de varios elementos responda?

Aqui esta el codigo de la pagina que da estos botones:

{% extends "todo/base.html" %}

{% block content %}

   <style>
      .elements {
        display: block;
      }
      ul.items {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li.item {
        flex: 1 0 20%;
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
      .col {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    </style>

  <!-- Header -->
  <header class="intro-header">
    <div class="container">
      <div class="col-lg-5 mr-auto order-lg-2">
      <h3><br>Tell me something about you... </h3>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <section class="content-section-a">

    <div class="container">
      <dt>
        <span>Pick the keywords you want to express when wearing perfume</span>
      </dt>

    <form action = "/getmatch" method="POST">
      {% for keyword in keywords %}
        <div class="elements">
            <ul class="items ">
               <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
                 <div class="box">
                 <div data-toogle="buttons" class="col">
                    <span>{{ keyword.title }}</span>
                 </div>
                 </div>
               </li>
            </ul>
        </div>
      {% endfor %}
      {% csrf_token %}
        <button type="submit">Envoyer</button>
    </form>
    </div>
  </section>

  <!-- Bootstrap core JavaScript -->
  <script src="static/vendor/jquery/jquery.min.js"></script>
  <script src="static/vendor/popper/popper.min.js"></script>
  <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >


{% endblock %}

Intenté anadir cosas en la balisa

button:hover{background-color:orange;}

button:focus{background-color:red;}

Pero no modifiqué cualquiera cosa.

Con CSS

<style>
  .elements {
    display: block;
  }
  .items {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: column;
  }
  .item {
    flex: 1 0 20%;
    padding: 8px;
    margin: 2px;
    border-radius: 8px;
    border: 1px solid rgba(61, 86, 233, 0.3);
    text-align: center;
  }
  .col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .item:hover { background-color:orange; }

  .item-check {
    display: none;
  }
  .item-name {
    padding: 8px;
    margin: 2px;
    border-radius: 8px;
    border: 1px solid rgba(61, 86, 233, 0.3);
    text-align: center;
  }
  .item .item-check:checked + .item-name {
    background-color: rgba(61, 86, 233, 0.3);
  }

</style>

...

<form action = "/getmatch" method="POST">
  {% for keyword in keywords %}
    <div class="elements">
        <ul class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
          <li class="item">
            <label>
              <input class="item-check" name="keywords[]" type="checkbox" value= {{ keyword.title }} />
              <div class="item-name">{{ keyword.title }}</div>
            </label>
          </li>
        </ul>
    </div>
  {% endfor %}
  {% csrf_token %}
    <button type="submit">Envoyer</button>
</form>

Pero tengo este situacion con la animacion .item:hover alrededor del nombre y me gustaría que el botón interior se extendiera hasta este .item:hover :

introducir la descripción de la imagen aquí

4
  • 1
    el elemento con la clase col supongo que son los botones que salen no?. De ser así podrías con JQuery o JavaScript detectar el evento click y asignar un color al elemento que has hecho click. Commented el 2 feb. 2021 a las 12:05
  • 1
    Mejor que un color, una clase CSS
    – SJuan76
    Commented el 2 feb. 2021 a las 12:06
  • @Sjuan76 mejor mejor. Commented el 2 feb. 2021 a las 12:08
  • @SJuan76 ¡Con mucho gusto! ¿Cómo lo hago? Commented el 2 feb. 2021 a las 12:24

2 respuestas 2

2

Si la intención es usar solo CSS, entonces podrías hacerlo así:

  • Por cada keyword creamos un <label>
  • Dentro de cada <label> metemos:
    • un <input type="checkbox">el cual almacenará el valor del keyword
    • un <div> en el cual se visualizará el nombre del keyword

Cada vez que se haga click en el <label>, el <input> dentro cambiará de seleccionado (checked) a no seleccionado (unchecked).

Utilizando la pseudo-clase :checked y el selector de hermano adyacente (+) podremos cambiar los estilos del <div> cuando el <input> este seleccionado.

Ejemplo:

.elements {
  display: block;
}
.items {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-direction: column;
}
.item {
  flex: 1 0 20%;
}
.item-check {
  display: none;
}
.item-name {
  padding: 8px;
  margin: 2px;
  border-radius: 8px;
  border: 1px solid rgba(61, 86, 233, 0.3);
  text-align: center;
}
.item-check:checked + .item-name {
  background-color: rgba(61, 86, 233, 0.3);
}
.item-name:hover,
.item-check:checked + .item-name:hover {
  background-color:orange;
}
<form action="/getmatch" method="POST">
  <div class="elements">
    <ul class="items">
      <li class="item">
        <label>
          <input class="item-check" name="keywords[]" type="checkbox" value="1" />
          <div class="item-name">Keyword 1</div>
        </label>
      </li>
      <li class="item">
        <label>
          <input class="item-check" name="keywords[]" type="checkbox" value="2" />
          <div class="item-name">Keyword 2</div>
        </label>
      </li>
    </ul>
  </div>
  <button type="submit">Envoyer</button>
</form>

5
  • Es exactamente lo que busco. Sin embargo tengo problemas con los ul. Voy a puestar mia pregunta al dia Commented el 2 feb. 2021 a las 14:28
  • @RevolucionforMonica el problema con los li es porque no has copiado correctamente mi CSS ni el HTML
    – Marcos
    Commented el 2 feb. 2021 a las 17:07
  • Sí, lo siento... ¿sabes que puedo ponerlos uno al lado del otro mientras no se desborde a la derecha? Commented el 2 feb. 2021 a las 18:03
  • @RevolucionforMonica, ¿podrías compartirme un ejemplo de lo que te sucede? No me queda claro cual es el problema, entiendo que puede ser un problema de overflow. PD: he actualizado mi respuesta para mejorar el efecto hover
    – Marcos
    Commented el 2 feb. 2021 a las 18:14
  • Por seguro, es una pregunta que he tratado de resolver sin éxito durante varios días. Commented el 2 feb. 2021 a las 18:16
0

Solución con jQuery:

  1. Exporta el cdn de jQuery (o descargalo a tu local): <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  2. Añade una clase css (o lo haces directamente con jQuery).

.botonSeleccionado {
    background-color: aqua;
}
  1. Añade la clase boton(si quieres cambiarla por algo más descriptivo mejor.) al elemento html.
<div data-toogle="buttons" class="col boton">
</div>
  1. Crea un fichero tipo JavaScript ejemplo.js. Modificar según tus preferencias.
<script>
   $(document).ready(function() {
      ponerColor();
   });
   function ponerColor() {          
      $('.boton').on('click', function() {
         $(this).addClass('botonSeleccionado');
      })
    }
</script>
1
  • 2
    Creo que deberías usar toggleClass, de lo contrario no volver a "no seleccionado"
    – Marcos
    Commented el 2 feb. 2021 a las 14:20

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.