2

El tema es que mis botones nuevos reemplazan a los anteriores. Los estilos de otros inputs que ya tenía en una versión de jquery 1.9.0, Hice lo que el jQueryNoConflict indica y no me funcionó. Podrían ayudarme por favor. Necesito que los inputs que tengo en el html respeten el estilo de jquery 1.11.2. Lo que no h e logrado es que cada input tenga su estilo.

A continuación empieza el código de mis botones que reemplazan a los anteriores

Inputs anteriores

.div_genero input[type="radio"] {
    display: none;
}

user agent stylesheet
input[type="radio" i] {
    margin: 3px 3px 0px 5px;
}
user agent stylesheet
input[type="radio" i] {
    -webkit-appearance: radio;
    box-sizing: border-box;
}
user agent stylesheet
input[type="radio" i], input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    margin: 3px 0.5ex;
    padding: initial;
    border: initial;
}
<div class="div_genero">
										<input type="radio" name="genero" value="f" id="radio_genero_f" class="required" title="Indica tu sexo">
										<label for="radio_genero_f"><span></span>Femenino</label>
										<input type="radio" name="genero" value="m" id="radio_genero_m" class="required" title="Indica tu sexo" checked="checked">
										<label for="radio_genero_m"><span></span>Masculino</label>
									</div>

BOTONES NUEVOS

<script type="text/javascript">
$(document).ready(function(e) {
	$('input').lc_switch('on-string', 'off-string');

	// triggered each time a field changes status
	$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
		var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
		console.log('field changed status: '+ status );
	});
	
	
	// triggered each time a field is checked
	$('body').delegate('.lcs_check', 'lcs-on', function() {
		console.log('field is checked');
	});
	
	// triggered each time a is unchecked
	$('body').delegate('.lcs_check', 'lcs-off', function() {
		console.log('field is unchecked');
	});
});
</script>
@charset "utf-8";
/* CSS Document */
.lcs_wrap {
	display: inline-block !important;	
	direction: ltr !important;
	height: 28px !important;
    vertical-align: middle !important;
}
.lcs_wrap input {
opacity: 0;
}

.lc_switch{
    display: inline-block !important;
    position: relative !important;
    width: 40px !important;
    height: 19px !important;
    border-radius: 30px !important;
    background-color: white !important;
    border: 2px solid #E5E5E5 !important;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out !important;
    -ms-transition: all .2s ease-in-out !important;
    transition: all .2s ease-in-out !important;
}
.lcs_cursor {
    display: inline-block !important;
    position: absolute !important;
    top: -3px !important;
    width: 21px !important;
    height: 21px !important;
    border-radius: 100% !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 10 !important;
    -webkit-transition: all .2s linear !important;
    -ms-transition: all .2s linear !important;
    transition: all .2s linear !important;
}
.lcs_label.lcs_label_on {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 16px;
text-decoration-color: aqua;
	left: -70px;
	z-index: 6;	
}
.lcs_label.lcs_label_off {
	right: -70px !important;
	z-index: 5 !important;	
}


/* on 
.lcs_switch.lcs_on {
	background-image: url(espacio_back.png);
	background-repeat: no-repeat;
}*/
.lcs_switch.lcs_on .lcs_cursor {
	background-color: #72A84F !important;
	top: -4px !important;
	left: 23px !important;
	border: 3px solid #5D9638 !important;
}
.lcs_switch.lcs_on .lcs_label_on {
	left: 10px !important;	
	opacity: 1 !important;
}
.lcs_switch.lcs_on .lcs_label_on .label {
text-decoration-color: aqua !important;
}

/* off
.lcs_switch.lcs_off {
		background-image: url(espacio_back.png);
	background-repeat: no-repeat;
} */
.lcs_switch.lcs_off .lcs_cursor {
	background-color: #E56161 !important;
	top: -4px !important;	
	left: -13px !important;
	border: 3px solid #9E3939 !important;
}
.lcs_switch.lcs_off .lcs_label_off {
	right: 10px !important;	
}


/* disabled 
.lcs_switch.lcs_disabled {
	opacity: 0.65;
	filter: alpha(opacity=65);	
	cursor: default;
}*/
   <link href="../../../css/lc_switch.css" rel="stylesheet" type="text/css" />
        
        
         <script src="../../../js/lc_switch.js" type="text/javascript"></script>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript" src="jQueryAssets/jquery-1.11.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
    
    
<form>
                  <div class="tabla_espacios">
                  <p> 1
                      <input    <?php if (!(strcmp(1,"1"))) {echo "checked=\"checked\"";} ?> type="radio" name="radio-1" class="lcs_check lcs_tt2"autocomplete="off" value="1" checked="checked" />
                    </p>
                  <p>3
                      <input    <?php if (!(strcmp(1,"2"))) {echo "checked=\"checked\"";} ?> type="radio" name="radio-1" value="2" class="lcs_check lcs_tt2"  autocomplete="off" />
                    </p>
                  <p>3
                      <input    <?php if (!(strcmp(1,"3"))) {echo "checked=\"checked\"";} ?> type="radio" name="radio-1" value="3" class="lcs_check lcs_tt2"  autocomplete="off" />
                    </p>
                </div>
                </form>

9
  • porq qué tienes 3 archivos de jquery cargando en el documento? (1.9.0, 1.10.4 y 1.11.2)
    – Art_Code
    el 22 may. 2018 a las 0:20
  • Gracias Huskie, me entregaron el código así. Puedo quitar los anteriores no y quedarme con el 1.11.2. de todos modos no funciona el lc_switch. el 22 may. 2018 a las 2:19
  • Efectivamente Monica. No es bueno tener 3 versiones, lo recomendable es dejar la más actual y quitar las otras. Luego de que las elimines pruebas el código para garantizar que no existan efectos colaterales en el funcionamiento del sitio, por ejemplo, la version 1.9 tenía una función llamada esto() y en la versión 1.11 ahora se llama ello(), ese tipo de cosas. Un saludo!
    – Art_Code
    el 22 may. 2018 a las 11:30
  • Gracias en verdad. Ayer encontré otra opción de jQueryNoConflict, si me funciona la posteo. Te comparto que uno de los errores que me sale es "Uncaught ReferenceError: jQuery is not defined at lc_switch.js" y luego me dice que la función no está declarada. el 22 may. 2018 a las 13:51
  • Osea como tal si respeta la función, el problema es que me reemplaza los estilos de los inputs; y es cuando arroja el error que la función lc_switch no está declarada. el 22 may. 2018 a las 13:54

1 respuesta 1

1

Primero te recomiendo eliminar las múltiples librerias de Jquery que tienes en tu código ya que aparte de generar una "sobrecarga" innecesaria al servidor también sucede que es un esquema poco flexible y adaptable porque tendrías que dar "mantenimiento" a 3 librerías distintas y cuando requieras premura en dar respuesta a una solicitud se te hará cuesta arriba por la cantidad de código a depurar.

Dicho lo anterior elimina las librerias antiguas de jquery y sólo deja la más actual (1.11.2 según observo en tu código) y para resolver el detalle que tienes con lc_switch sólo hace falta invertir el orden en que cargas los archivos ya que la libreria de lc_switch depende de algunas funciones de jquery.

Al cargar primero lc_switch no estás permitiendo que tenga acceso a las funciones de Jquery que requiere para su correcto funcionamiento y de allí el error. Cambia el siguiente código:

<script src="../../../js/lc_switch.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jQueryAssets/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

Por:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../../js/lc_switch.js" type="text/javascript"></script>

Y con esto solucionar el inconveniente.

Espero sea de ayuda. Un saludo!

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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