I don't understand this JQuery code

JavaScript
1 
$('.color-choose input').on('click', function() {
      var headphonesColor = $(this).attr('data-image');
 
      $('.active').removeClass('active');
      $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
      $(this).addClass('active');
  });

I got this code from this tutorial but I dont understand its meaning. Please help.
https://designmodo.com/create-product-page/

2

I believe the code is undoing the current selection (no matter which item – radio button – was selected) and making the new selection active. That action selects the new image. Specifically, the “active” class is being removed from the selected image and being applied to the new selected image.

4 Likes
3

Hi there littlebirdy,

I never understood it either. :wonky:

But then I’ve never tried. :winky:

What I can do though, in recompense,
is give you a CSS example instead. :biggrin:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Headphones</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
h1 {
    color: #666;
    text-align: center;
 }
input[type="radio"] {
    position: absolute;
    left: -999em;
 }
#container {
    position: relative;
    width: 50%;
    padding-top: 50%;
    margin: auto;
 }
#container img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s ease-in-out;
 }
#container div {
    position: absolute;
    width: 30%;
    left: 100%;
    top: 50%;
    white-space: nowrap;
 }
#container div label {
    position: relative;
    display: inline-block;
    width: 25%;
    padding-top: 25%;
    margin: 0 2%;
    border: 0.15em solid rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.8);
    cursor: pointer;
 }
#container div label:nth-child(1) { background-color: rgb(201, 21, 36); }
#container div label:nth-child(2) { background-color: rgb(9, 71, 125); }
#container div label:nth-child(3) { background-color: rgb(50, 50, 50); }
#r0:checked~#container img:nth-child(3), 
#r1:checked~#container img:nth-child(2), 
#r2:checked~#container img:nth-child(1) {
    opacity: 1;
 }
#r0:checked~#container div label:nth-child(1)::before,
#r1:checked~#container div label:nth-child(2)::before,
#r2:checked~#container div label:nth-child(3)::before {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   content: '\2713';
   font-size: 2.5vw;
   color: rgb(255, 255, 255);
 }
</style>
</head>
<body> 
 <h1>Headphones</h1>
  <input id="r0" type="radio" name="r" checked>
  <input id="r1" type="radio" name="r">
  <input id="r2" type="radio" name="r">
 <div id="container">
  <img src="https://designmodo.com/demo/product-page/images/black.png" alt="black set">
  <img src="https://designmodo.com/demo/product-page/images/blue.png" alt="blue set">
  <img src="https://designmodo.com/demo/product-page/images/red.png" alt="red set">
 <div>
  <label for="r0"></label>
  <label for="r1"></label>
  <label for="r2"></label>
 </div>
<!-- #container --></div>
</body>
</html>

coothead

2 Likes
4 
// Attaches an event handler to fire every time an element matching
// the selector ".color-choose input" is clicked upon.
$('.color-choose input').on('click', function() {

  // Assigns the value of the element's data-image attribute to
  // a headphonesColor variable
  var headphonesColor = $(this).attr('data-image');
 
  // Selects all elements with the class "active" and removes this class
  $('.active').removeClass('active');

  // Adds the class of active to any elements matching the selector 
  // '.left-column img[data-image = ' + headphonesColor + ']'
  // This will parse to something like '.left-column img[data-image = 'red']'
  $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');

  //Adds the class "active to the element which was clicked
  $(this).addClass('active');
});

That help?

2 Likes
5

Now its clear :slight_smile:

Thank you Pulloo :slight_smile:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.