jQuery addClass example

Change class name on click in jQuery

by Satheesh Kumar

HTML

<select id="event" >
<option value="all">All</option>
<option value="upcoming">Upcoming</option>
<option value="past">Past</option>
</select>

<select id="city">
<option value="all">All</option>
<option value="karur">Karur</option>
<option value="coimbatore">Coimbatore</option>
</select>

<select id="date">
<option value="all">All</option>
<option value="1-jan">1 Jan</option>
<option value="2-jan">2 Jan</option>
</select>

<div data-event="upcoming" data-city="karur" data-date="1-jan">
Upcoming karur 1-jan
</div>
<div data-event="upcoming" data-city="karur" data-date="2-jan">
Upcoming karur 2-jan
</div>
<div data-event="past" data-city="karur" data-date="1-jan">
Past karur 1-jan
</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

<script>
$("select").on("change", function(){
d();
});
d();
function d(){
var event = $("#event").val();
var city = $("#city").val();
var date = $("#date").val();
if((event != "all") && (city != "all") && (date != "all")){
		$("[data-event]").each(function(){
    var eventKey = $(this).attr("data-event"),
    cityKey = $(this).attr("data-city"),
    dateKey = $(this).attr("data-date");
    
    if((event === eventKey) && (city === cityKey) && (date === dateKey)){
    $(this).css("display", "flex");
    }
    else{
        $(this).css("display", "none");
    }
    
    });
    
}
else if (((event != "all") && (city != "all")) && (date === "all")){
		$('[data-event]').each(function(){
    var eventKey = $(this).attr("data-event"),
		    cityKey = $(this).attr("data-city");
        if((event === eventKey) && (city === cityKey)){
            $(this).css("display", "flex");
        }
        else{
            $(this).css("display", "none");
        }
    });
}
else if((event != "all")&&((city === "all") && (date === "all"))){
	$('[data-event]').each(function(){
    var eventKey = $(this).attr("data-event"),
		    cityKey = $(this).attr("data-city");
	if(event === eventKey){
  $(this).css("display","flex");
  }
  else{
    $(this).css("display","none");
  }
});
}
else if((date != "all") && ((city === "all") && (event === "all"))){
		$('[data-event]').each(function(){
    var eventKey = $(this).attr("data-event"),
		    cityKey = $(this).attr("data-city"),
        		    dateKey = $(this).attr("data-date");
        if(date === dateKey){
        $(this).css("display", "flex");
        }
        else{
                $(this).css("display", "none");
        }
        });
}
else if(((date === "all") && (event === "all")) && ((city != "all"))){
$('[data-event]').each(function(){
 var eventKey= $(this).attr("data-event"),
 			cityKey = $(this).attr("data-city"),
      dateKey = $(this).attr("data-date");
      
      if(city === cityKey){
      $(this).css("display", "flex");
...