How to add click loop function in JQuery?

jquery
#1

Hello.

I created a list containing 4 items:

<body class="body">
<div class="carousel-container">
  <ol class="carousel">
    <li id="fire" class="carousel-item"><a href="#">Fire</a></li>
    <li id="ice" class="carousel-item"><a href="#">Ice</a></li>
    <li id="wind" class="carousel-item"><a href="#">Wind</a></li>
    <li id="darkness" class="carousel-item"><a href="#">Darkness</a></li>
  </ol>
</div>
</body>

I want each item click changes background images, but the way I did it in JQuery is bad:

$(document).ready(function(){
  $('#fire').on("click", function(){
    $('.body').addClass("fire");
  });
  $('#ice').on("click", function(){
    $('.body').addClass("ice");
  });
  $('#wind').on("click", function(){
    $('.body').addClass("wind");
  });
  $('#darkness').on("click", function(){
    $('.body').addClass("darkness");
  });
});

CSS

body {
  height: 100vh;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  height: 97%;
}

.carousel-item {
  display: inline;
  border: 1px solid green;
  padding: 10px;
}

.carousel-item a {
  text-decoration: none;
  color: black;
}

.carousel-item a:hover {
  color: white;
}

.fire, .ice, .wind, .darkness {
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.fire {
  background-image: url('https://honeysanime.com/wp-content/uploads/2015/01/Portgas-D.-Ace-595x500.jpg');
}

.ice {
  background-image: url('http://img1.wikia.nocookie.net/__cb20121210214959/magi/images/d/dd/Ice_Magic_anime.png');
}

.wind {
  background-image: url('https://cdna.artstation.com/p/assets/images/images/015/320/476/large/filipe-emerson-aang.jpg?1547915445');
}

.darkness {
  background-image: url('http://img15.deviantart.net/8b13/i/2013/243/0/8/purple_flame_by_dark_spine_dragon-d6ki5m2.png');
}

#fire:hover {background: rgb(226, 88, 34);}
#ice:hover {background: rgb(109,155,195);}
#wind:hover {background: #8cc5f2;}
#darkness:hover {background: rgb(85,26,139);}

It’s like it’s creating layers, so when I click the button again the background image doesn’t change.
May you please give me a better function to do this?

Thank you

Working Code: Codepen

#2

You can use removeClass to remove the other classes that you don’t want to be there. The class names can be space-separated, to remove multiple classes a the same time.

#3

Hi @Sora, you can use the removeClass() method then to remove previously added classes before adding the new one:

var classNames = ['fire', 'ice', 'wind', 'darkness']

$('#fire').on('click', function () {
  $('.body')
    .removeClass(classNames)
    .addClass('fire')
})

$('#ice').on('click', function () {
  $('.body')
    .removeClass(classNames)
    .addClass('ice')
})

$('#wind').on('click', function () {
  $('.body')
    .removeClass(classNames)
    .addClass('wind')
})

$('#darkness').on('click', function () {
  $('.body')
    .removeClass(classNames)
    .addClass('darkness')
})

Of course, writing that out for every carousel item is tedious and hard to maintain; given that every class name is the same as the item’s ID, you might directly map those IDs to the class names like so:

var $items = $('.carousel-item')
var $body = $('.body')

var classes = $items.map(function () {
  return this.id
}).get()

$items.on('click', function () {
  $body.removeClass(classes).addClass(this.id)
})

This way you don’t have to hard-code any ID / class relations in your JS at all… here’s the updated pen.

2 Likes