¿Cómo puedo cambiar mi script de Java para que funcione si el seleccionado tiene varias palabras? Por ejemplo, debajo, el valor tiene dos palabras "Eventos en línea", la clase div tiene dos palabras "Eventos en línea", sin embargo, permanecerá oculto ya que el Jquery actual solo se verá. para el valor si coincide con la clase como una palabra.
let $j = jQuery.noConflict(); $j(document).ready(function($j) { $j("#event-drop").change(function() { let opt = $j(this).val(); if (opt === "all") { $j(".event_div").show(); } else { $j(".event_div").hide(); $j("." + opt).show(); } }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="event-drop" style="margin-bottom:20px"> <option value="all">All</option> <option value="Online Events">online</option> <option value="Ofline Events">online</option> </select> <div class="card-deck col-4 pb-5 Online Events event_div" style=""> <div class="card top-line-grey"> <small class="card-header bg-transparent border-0 font-weight-bold text-uppercase" style="color: #8D8CAB">here titlke</small> <div class="card-body"> <h5 class="card-title text-capitalize pb-2">Sub title</h5> </div> <div class="card-footer bg-transparent border-0"> <small class="float-left font-weight-bold text-uppercase"> small text </small> <small class="float-right font-weight-bold text-uppercase"> January 4, 2022 </small> </div> <div class="card-footer bg-transparent border-0"> <a class="btn-link text-uppercase" href="http://www.google.com" target="_blank"> More info </a> </div> </div> </div>JS lee el valor correctamente, pero lo que termina mostrando es esto:
.Online Events
Eso significa que está mostrando un elemento de Events dentro de un contenedor que tiene la clase Online . Algo como esto:
<div class="Online"> <Event>...</Event> </div>El problema es el espacio entre el valor. Reemplace el espacio con un guión y cambie la clase en consecuencia y debería funcionar bien.
$('#select').change((e) => { const value = e.target.value; if(value == 'all'){ $('ul > li').show(); return; } $('ul > li').hide(); $('.' + value).show(); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select"> <option value="all">All</option> <option value="online">Only Online</option> <option value="offline">Only Offline</option> </select> <ul> <li class="online">Cool Online Event</li> <li class="offline">Cool Offline Event</li> <li class="online">Cool Online Event</li> </ul>Dentro de los valores de option select > hay un espacio ' ' que da como resultado que no coincidan los nombres de clase.
Porque cada valor proporcionado con espacio dentro del atributo class se tomará como una clase separada. Por lo tanto, Online y Events se consideran clases separadas.
También $j('.Online Events') intentará encontrar el Events Element dentro Online Class . Eso da como resultado una operación fallida.
Para superar este problema:
select > valor de option , mantenga el valor del atributo de class con algún separador como _ (guión bajo). También realice, reemplace ' ' (espacio) con '_' (guión bajo) en el valor de opción seleccionado dentro de javascript para encontrar la coincidencia exacta.option select > sin espacio y use el mismo valor en el atributo de clase. let $j = jQuery.noConflict(); $j(document).ready(function($j) { $j("#event-drop").change(function() { let opt = $j(this).val(); if (opt === "all") { $j(".event_div").show(); } else { opt = opt.replace(" ", "_"); // Replace space with underscore to match class $j(".event_div").hide(); $j("." + opt).show(); } }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="event-drop" style="margin-bottom:20px"> <option value="all">All</option> <option value="Online Events">online</option> <option value="Ofline Events">ofline</option> </select> <!-- Using `Online_Events` in `class` attribute value instead of `Online Events`. --> <div class="card-deck col-4 pb-5 Online_Events event_div" style=""> <div class="card top-line-grey"> <small class="card-header bg-transparent border-0 font-weight-bold text-uppercase" style="color: #8D8CAB">here titlke</small> <div class="card-body"> <h5 class="card-title text-capitalize pb-2">Sub title</h5> </div> <div class="card-footer bg-transparent border-0"> <small class="float-left font-weight-bold text-uppercase"> small text </small> <small class="float-right font-weight-bold text-uppercase"> January 4, 2022 </small> </div> <div class="card-footer bg-transparent border-0"> <a class="btn-link text-uppercase" href="http://www.google.com" target="_blank"> More info </a> </div> </div> </div>