How can I change my java scrip to work if the selected has multiple words, for example bellow the value has two words "Online Events" the div class is two words "Online Events" however it will remain hidden as the current Jquery will only look for the value if matches the class as one word.
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 reads the value correctly but what you end up showing is this:
.Online Events
That means you are showing an Events element inside a container having the Online class. Something like this:
<div class="Online">
<Event>...</Event>
</div>
The problem is the space inbetween the value. Replace the space with a dash and change the class accordingly and it should work fine.
$('#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>Within select > option values there is a space ' ' which results in not to match the class names.
Because each value provided with space inside class attribute will be taken as separate class. So Online and Events are considered as separate classes.
Also $j('.Online Events') will try to find Events Element inside Online Class. That results in failed operation.
To overcome this issue:
select > option value, keep class attribute value with some separator like _ (underscore). Also perform, replace ' ' (space) with '_' (underscore) in selected option value inside javascript to find exact match.select > option without space and use same value in class attribute.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>