3

En mi web tengo una lista de 15 elementos (o conjuntos de elementos HTML) como éste:

introducir la descripción de la imagen aquí

El número grande y rosa lo creo a partir de una variable contador en PHP:

<div class="mr-3"> <?php echo '<span class="numero">'.$contador.'</span>'; ?> </div>

Querría que cada vez que la variable adquiere el valor 2 o el 12 (en general cualquiera cuyo último dígito sea un 2, pero como el máximo es 15, da igual) al contenedor span se le aplicase un margin-right: 15px; para que no quedase tan pegado al texto que lo acompaña.

He probado a hacer esto:

$(function()
{
    let contador = "<?php echo $contador;?>";

    if(contador == 2 || contador == 12) 
    {
        $('.numero').css('margin-right', '15px');
    }
});

Pero JQuery no encuentra relación entre contador y los objetos con class="numero" y se limita a añadir el estilo para todos ellos.

Gracias de antemano por vuestra ayuda.

1
  • 1
    Se me ocurre algo así: class="numero <php if(contador == 2 || contador == 12) echo 'numeroDos' ?>". Y en tu CSS .numeroDos{margin-right: 15px}
    – x3k
    el 31 jul. 2019 a las 9:56

1 respuesta 1

6

¿Y por que no tratas el problema desde PHP directamente? Podrías hacer algo como esto:

PHP

<div class="mr-3"> 
<?php 
  if ($contador == 2 || $contador == 12) {
    echo '<span class="numero margen">'.$contador.'</span>'; 
  }
  else {
    echo '<span class="numero">'.$contador.'</span>';
  }
?> 
</div>

Añadirle o no añadirle la clase .margen donde esta clase tuviese:

CSS

.margen {
  margin-right: 15px;
}

EDIT

Otra solución, ya que parece que quieres usar Jquery para solucionarlo, sería apoyándose en un atributo data de HTML5:

<div class="mr-3"> <?php echo '<span class="numero" data-contador="' . $contador . '">'.$contador.'</span>'; ?> </div>

Así almacenarías $contador en el HTML y podrías cambiar el estilo de los que tengan los valores 2 o 12 unicamente:

$(function () {
  $('[data-contador="2"]').css('margin-right', '15px');
  $('[data-contador="12"]').css('margin-right', '15px');
});

O ni usar Jquery y hacerlo directamente con CSS, como me sugirió el colega @x3k_js:

span[data-contador="2"], span[data-contador="12"] {
  margin-right: 15px;
}
3
  • Realmente era por no enguarrar el código; los scripts de jQuery los tengo en otro archivo. el 31 jul. 2019 a las 10:04
  • 1
    Edité para darte una solución "más limpia" que quizás se parezca un poco más a lo que querías conseguir.
    – phpMyGuel
    el 31 jul. 2019 a las 10:22
  • Genial, me parece una solución muy buena. el 31 jul. 2019 a las 10:31

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.