Soy nuevo en JQuery y quiero hacer una función simple. Tengo un div cuyo nombre se basa en una identificación de una casilla de verificación. Quiero que se muestre el div solo si su casilla de verificación está marcada pero el código no funciona. Me muestra este error ($courseTimeDiv.hide no es una función).
esta es la parte donde defino la casilla de verificación
`$programList .= ' <div class="form-check proDiv"> <input type="checkbox" name="course[]" class="form-check-input group2" id="'.$coursePrice.'" value="'.$courseId.'"> <label class="form-check-label" for="'.$coursePrice.'">'.$courseName .' price is '.$coursePrice.'$</label> </div>';`esta es la parte del código HTML donde defino el div
` $programList .= '<div name="timeDiv'.$courseId.'" class="timeGroup" > <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="timeRadio" value="Weekday" name="time['.$courseId.']" /> <label class="form-check-label"><strong>Weekdays</strong> </div> </div>'; `y este es el código JQuery
`$("input[name='course[]']").on('change', function () { var $courseIdValue = $('input[name="course[]"]:checked').val(); var $courseTimeDiv = $("input[name='timeDiv']") + $courseIdValue; if($courseTimeDiv.match(/$courseIdValue/)) { $courseTimeDiv.show(300); } else { $courseTimeDiv.hide(); } });`cualquier ayuda es apreciada
var $courseTimeDiv = $("input[name='timeDiv']") + $courseIdValue;
¿Qué estás tratando de hacer en esta línea?
SI, está tratando de seleccionar un elemento, entonces no puede usar el método de match en la siguiente línea
SI, está intentando crear el selector de elementos, entonces el motor js es correcto y su variable no tiene un elemento para que pueda seleccionarlo
y en ambos escenarios lo está haciendo mal porque está seleccionando un elemento de entrada con nombre = 'timeDiv' + blabla mientras que en su código no existe tal elemento
creo que quisiste decir
var selector = "div.timeDiv" + $courseIdValue var $courseTimeDiv = $(selector);no es tan simple, tiene varias casillas de verificación y cada casilla de verificación tiene su propio valor, y quiere todas las seleccionadas
por lo tanto, debe procesarlos para ver cuál está seleccionado y cuál no, y el método de coincidencia no lo ayudará en este proceso
`$("input[name*='course']").on('change', function () { var value = $(this).val(); var selector = "div[name*=[timeDiv" + value + "]" var courseTimeDiv = $(selector); if( $(this).is(':checked') ){ courseTimeDiv.show(300); } else { courseTimeDiv.hide(); } });`¡Creo que esto debería funcionar!
=========ACTUALIZAR==========
El código anterior funciona, pero se puede escribir de esta manera para tener un mejor rendimiento
`$("input[name*='course']").on('change', function () { var value = this.value; var selector = "div[name*=[timeDiv" + value + "]" var courseTimeDiv = $(selector); if( this.checked ){ courseTimeDiv.show(300); } else { courseTimeDiv.hide(); } });`