Jyo Nookula Jyo Nookula - 3 months ago 10
jQuery Question

CSS-jquery Change background swatch on clicking the swatch icon

I would like the page background to change when I click on a particular swatch. My jquery code does not seem to work. Any thoughts?



$(".black swatch").click(function() {
$("body").addClass("black");
});

.swatch {
height: 100px;
width: 100px;
border-radius: 50%;
float: left;
margin-right: 20px;
border: 1px solid #000;
}
.black {
background-color: #000;
color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="swatches">
<div class="black swatch"></div>







Answer

You want it like this? it's because you are clicking the .swatch div only which then runs the script to add the class.

$(".swatch").click(function() {
  $("body").addClass("black");
});
.swatch {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
  border: 1px solid #000;
}
.black {
  background-color: #000;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="swatches">
  <div class="black swatch"></div>

Comments